动画实践

博客分类: 江河计划

动画实践

算法

字符串反转

    s = "hello" => "olleh"
    
    /*
    * 思路1:反向遍历字符串
    */
    var s1 = "";
    for (var i = s.length-1; i >= 0; i--) {
        s1 += s[i];
    }
    return s1;
    /*
    * 思路2:1.建立两个指针,分别指向首尾,遍历数组,直至指针相遇;
            2.将两个指针值交换
            超出时间
    */
    //     var s1 = Array.from(s);
    //     var left = 0;
    //     var right = s.length-1;
    //     while (left < right) {
    //         temp = s1[left];
    //         s1[left] = s1[right];
    //         s1[right] = temp;
    //     }
    //     return s1.join("");

颠倒整数

给定一个 32 位有符号整数,将整数中的数字进行反转。-123 => -321 120 => 21

    var reverse = function(x) {
        var minn = -(1 << 30) * 2;
        var maxn = (1 << 30) * 2 - 1;
        var tag = x < 0 ? -1 : 1;
        var s = x * tag + '';
        var s1 = ''
        for (var i = s.length; i--;) {
            s1 += s[i];
        }
        var res = (s1 - 0) * tag;
        if (res < minn || res > maxn)
            return 0;
        else
            return res;
    };

字符串中的第一个唯一字符

给定一个字符串,找到它的第一个不重复的字符,并返回它的索引。如果不存在,则返回 -1

    var firstUniqChar = function(s) {
        var str = s.toLowerCase();
        for(var i=0;i<str.length;i++){
            var ch = str.charAt(i);
            //如果后面没有该字符,且前面也没有出现过
            if(str.indexOf(ch) == i && str.lastIndexOf(ch) == i){
                return i;
            }
        }
        return -1;
    };

有效的字母异位词

给定两个字符串 s 和 t ,编写一个函数来判断 t 是否是 s 的一个字母异位词

    var isAnagram = function(s, t) {
        var codeMap = {};
        if(s.length !== t.length) return false;
        for(var i=0; i<s.length; i++){
            var code = s.charCodeAt(i)
            codeMap[code] = codeMap[code] ? ++codeMap[code] : 1;
        }
        for(var i=0; i<t.length; i++){
            var code = t.charCodeAt(i)
            if(!codeMap[code]) return false;
            codeMap[code]--;
        }
        for(var i in codeMap){
            if(codeMap[code] !== 0) return false;
        }
        return true
    };

动画实例

介绍几个 3D 动画框架,threejs 就不说了。

pixi.js

这个是一个国外做动画的第三方框架,可以支持 2D 和 webGL 的渲染,非常容易上手,适合做平面的场景动画。

网易出的好几个动画都是用的 pixi 来做的,网易的动画感觉不错,质量很高,我也模仿过几个。主轴动画的柯南和哈利波特。一镜到底的年度动画

Aframe

是 FF 浏览器出的一套 VR 的组件化方案,通过标签的方式 a-scene 原生支持场景动画,用来做 VR 特别方便。

hilo

hilo 是阿里出的一套动画方案,支持过淘宝双十一动画,万花筒的那个一镜到底的项目,按照官网一步一步走也能搭建出一个 flappy brid,为了看自己是否理解,改变了运动轨迹,让 flappy bird 能永久通关

flappy bird