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.

  • 相关阅读:
    将数据加载时显示的图片和文字提成公共的--实现方法
    JavaScript【面向对象】-静态方法-私有方法-公有方法-特权方法
    强大的JS数组
    sql工作问题总结
    JSON.stringify()的使用--将string转换成json
    JS小技巧
    JS工作积累
    (六)Redis之数据结构之Set
    (五)Redis之List
    (四)Redis之哈希
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5695532.html
Copyright © 2011-2022 走看看