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.

  • 相关阅读:
    Ubuntu 系统下载
    Shell 变量自增实现方法
    shell 单引号以及双引号
    A look at WeChat security
    利用HTTP Cache来优化网站
    require.js 简洁入门
    Nginx rewrite URL examples with and without redirect address
    页面制作部分之PS切图
    Joda-Time 简介
    [官方摘要]Setup And Configuration memcached with Tomcat
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5695532.html
Copyright © 2011-2022 走看看