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

    Previous, we animate the item by passing an array to tell the start position and end position.

    To make thing more interesting, we actually can pass the function instead of array.

    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:
        
        list.addCircle({
            x: function(t){
                return 200 + Math.cos(t * Math.PI * 2) * 150;
            },
            y: function(t){
                return 200 + Math.sin(t * Math.PI * 2) * 150;
            },
            radius :10
        })
    }

    Create Multi circle by for loop:

    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:
        
        for(var i = 0; i < 400; i += 20){
             list.addCircle({
                x: function(t){
                    return 200 + Math.cos(t * Math.PI * 2) * 150;
                },
                y: function(t){
                    return 200 + Math.sin(t * Math.PI * 2) * 150;
                },
                radius :10,
                phase: i / 400 
            })
        }
    
    }

    To make thing even more interesting, we can set different x and y start point:

    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:
        
        for(var i = 0; i < 400; i += 20){
             list.addCircle({
                thisI: i, // custom prop to save i
                x: function(t){
                    return this.thisI + Math.cos(t * Math.PI * 4) * 100;
                },
                y: function(t){
                    return this.thisI  + Math.sin(t * Math.PI * 4) * 50;
                },
                radius :10,
                phase: i / 400 
            })
        }
    
    }

    We create 'thisI' to save i for addCircle to avoid common javascript problem.

  • 相关阅读:
    vue单页面
    禁止系统默认右键并执行自己的程序
    jquery-ui拖动
    jquery鼠标右键功能 备忘
    日历插件 备忘
    兼容于苹果手机的点击方法
    js判断设备访问入口
    微信小程序点击显示某个view
    微信小程序数量减
    点外层div关闭,点里层不关闭
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5695532.html
Copyright © 2011-2022 走看看