zoukankan      html  css  js  c++  java
  • [GIF] The Phase Property in GIF Loop Coder

    In this lesson, we look at one of the most powerful features in GIF Loop Coder, the phase property, which allows you to let different objects run animations shifted in time.

    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:
    
        glc.styles.backgroundColor = "black";
    
        for(var i = 0; i < 1000; i++){
    
            list.addCircle({
                x: Math.random() * width,
                y: Math.random() * height,
                radius: [0.25,1],
                fillStyle: "white",
                phase: Math.random() + 10
            })
        }
        
        list.addText({
            x: width / 2,
            y: height / 2 + 20,
            fontSize: [18, 24],
            text: "Tecnotree Way of Work (WoW)",
            fillStyle: ["white", "yellow"],
        })
    }
    
       

    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 res = 10;
        for(var y = 0; y < height; y += res){
            for(var x = 0; x < width; x +=res){
                var dx = x - width / 2,
                    dy = y - height / 2,
                    dist = Math.sqrt(dx * dx+dy*dy);
                
                list.addCircle({
                    translationX: x,
                    translationY: y,
                    x: res / 2,
                    y: res / 2,
                    radius: res / 2,
                    fillStyle: ["red", "yellow"],
                    phase: -dist / 100
                })
            }
        }
    }
    
       

  • 相关阅读:
    Linux下hook指定库
    一行一行往上爬
    高可用数据同步方案-SqlServer迁移Mysql实战
    Hystrix核心基础
    Fastjson解析多级泛型的几种方式—使用class文件来解析多级泛型
    面试大全之JVM篇
    云原生下的CICD
    学习Raft算法的笔记
    Go语言下的线程模型
    分布式事务解决方案以及 .Net Core 下的实现(上)
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5819442.html
Copyright © 2011-2022 走看看