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.

  • 相关阅读:
    缩放图片
    Volley下载图片存放在data/data下 networkImageView lrucache
    类实现Parcelable接口在Intent中传递
    基本控件设置边角图片 drawableleft
    屏幕全屏之类的问题
    关于点击按钮分享
    万能适配器的一些问题
    自定义控件高级
    Fragment 生命周期 全局变量的声明位置
    GridView
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5695532.html
Copyright © 2011-2022 走看看