[GIF] Parenting in GIF Loop Coder

最新推荐文章于 2025-07-15 17:01:50 发布

转载最新推荐文章于 2025-07-15 17:01:50 发布 · 55 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Answer1215/p/5716310.html

本文介绍如何通过设置父级元素创建复杂的动画效果，利用Circle、Rect、Ray等形状，并使用Container隐藏不需要显示的父元素。

In this lesson, we look at how you can build up complex animations by assigning one shape as the parent of another, creating a branching display tree.

function onGLC(glc) {
    glc.loop();
//     glc.size(400, 400);
//     glc.setDuration(5);
//     glc.setFPS(20);
    glc.setMode('single');
    glc.setEasing(false);
    var list = glc.renderList,
        width = glc.w,
        height = glc.h,
        color = glc.color;

    // your code goes here:


    var Circle = list.addCircle({
        x: width / 2,
        y: height / 2,
        radius: 150,
        stroke: true,
        fill: false,
        rotation: [0,360]
    });
    
    list.addRect({
        x: 150,
        y: 0,
        w: [0, 100],
        h: 40,
        parent: Circle
    });
    
}

function onGLC(glc) {
    glc.loop();
//     glc.size(400, 400);
//     glc.setDuration(5);
//     glc.setFPS(20);
    glc.setMode('single');
    glc.setEasing(false);
    var list = glc.renderList,
        width = glc.w,
        height = glc.h,
        color = glc.color;

    // your code goes here:


    var ray1 = list.addRay({
        x: 0,
        y: height / 2,
        length: 100,
        angle: [-60,60]
    });
    
    var ray2 = list.addRay({
       x: 100,
        y:0,
        length: 100,
        angle: [120,-120],
        parent: ray1
    });
    
    var ray3 = list.addRay({
        x: 100,
        y: 0,
        length: 100,
        angle: [-60,60],
        parent: ray2
    })
    
}

If you don't need the parent to show, you can use Container:

function onGLC(glc) {
    glc.loop();
//     glc.size(400, 400);
//     glc.setDuration(5);
//     glc.setFPS(20);
    glc.setMode('single');
    glc.setEasing(false);
    var list = glc.renderList,
        width = glc.w,
        height = glc.h,
        color = glc.color;

    // your code goes here:


    var parent = list.addContainer({
        x: width / 2,
        y: height / 2,
        rotation: [0,360]
    })
    
    list.addText({
        x: 150,
        y: 0,
        text: "EGGHEAD",
        rotation: [360,0],
        parent: parent
    })
}

转载于:https://www.cnblogs.com/Answer1215/p/5716310.html