zoukankan      html  css  js  c++  java
  • [GIF] Parenting in GIF Loop Coder

    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
        })
    }

  • 相关阅读:
    querySelectorAll和getElementsByClassName获取元素的区别
    移动端的点透事件
    formidable处理node.js的post请求
    Node中流的概念
    关于Node.js中的路径问题
    前端设计模式——原型模式
    JavaScript中的循环和闭包
    为什么给函数表达式添加函数名
    作为一个初学者如何简单地理解闭包
    JS的with关键字到底是什么?
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5716310.html
Copyright © 2011-2022 走看看