jquery tween.js优化版 写过渡动画

jquery tween.js优化版 写过渡动画

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>
        Document
    </title>
    <style type="text/css">
    #div {
        width: 100px;
        height: 100px;
        background: red;
    }
    </style>
    <script type="text/javascript">
    var Tween = {
        linear: function(t, b, c, d) {
            return c * t / d + b;
        },
        easeIn: function(t, b, c, d) {
            return c * (t /= d) * t + b;
        },
        easeOut: function(t, b, c, d) {
            return -c * (t /= d) * (t - 2) + b;
        },
        easeBoth: function(t, b, c, d) {
            if ((t /= d / 2) < 1) {
                return c / 2 * t * t + b;
            }
            return -c / 2 * ((--t) * (t - 2) - 1) + b;
        },
        easeInStrong: function(t, b, c, d) {
            return c * (t /= d) * t * t * t + b;
        },
        easeOutStrong: function(t, b, c, d) {
            return -c * ((t = t / d - 1) * t * t * t - 1) + b;
        },
        easeBothStrong: function(t, b, c, d) {
            if ((t /= d / 2) < 1) {
                return c / 2 * t * t * t * t + b;
            }
            return -c / 2 * ((t -= 2) * t * t * t - 2) + b;
        },
        elasticIn: function(t, b, c, d, a, p) {
            if (t === 0) {
                return b;
            }
            if ((t /= d) == 1) {
                return b + c;
            }
            if (!p) {
                p = d * 0.3;
            }
            if (!a || a < Math.abs(c)) {
                a = c;
                var s = p / 4;
            } else {
                var s = p / (2 * Math.PI) * Math.asin(c / a);
            }
            return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
        },
        elasticOut: function(t, b, c, d, a, p) {
            if (t === 0) {
                return b;
            }
            if ((t /= d) == 1) {
                return b + c;
            }
            if (!p) {
                p = d * 0.3;
            }
            if (!a || a < Math.abs(c)) {
                a = c;
                var s = p / 4;
            } else {
                var s = p / (2 * Math.PI) * Math.asin(c / a);
            }
            return a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b;
        },
        elasticBoth: function(t, b, c, d, a, p) {
            if (t === 0) {
                return b;
            }
            if ((t /= d / 2) == 2) {
                return b + c;
            }
            if (!p) {
                p = d * (0.3 * 1.5);
            }
            if (!a || a < Math.abs(c)) {
                a = c;
                var s = p / 4;
            } else {
                var s = p / (2 * Math.PI) * Math.asin(c / a);
            }
            if (t < 1) {
                return -0.5 * (a * Math.pow(2, 10 * (t -= 1)) *
                    Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
            }
            return a * Math.pow(2, -10 * (t -= 1)) *
                Math.sin((t * d - s) * (2 * Math.PI) / p) * 0.5 + c + b;
        },
        backIn: function(t, b, c, d, s) {
            if (typeof s == 'undefined') {
                s = 1.70158;
            }
            return c * (t /= d) * t * ((s + 1) * t - s) + b;
        },
        backOut: function(t, b, c, d, s) {
            if (typeof s == 'undefined') {
                s = 2.70158; //回缩的距离  
            }
            return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
        },
        backBoth: function(t, b, c, d, s) {
            if (typeof s == 'undefined') {
                s = 1.70158;
            }
            if ((t /= d / 2) < 1) {
                return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b;
            }
            return c / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b;
        },
        bounceIn: function(t, b, c, d) {
            return c - Tween['bounceOut'](d - t, 0, c, d) + b;
        },
        bounceOut: function(t, b, c, d) {
            if ((t /= d) < (1 / 2.75)) {
                return c * (7.5625 * t * t) + b;
            } else if (t < (2 / 2.75)) {
                return c * (7.5625 * (t -= (1.5 / 2.75)) * t + 0.75) + b;
            } else if (t < (2.5 / 2.75)) {
                return c * (7.5625 * (t -= (2.25 / 2.75)) * t + 0.9375) + b;
            }
            return c * (7.5625 * (t -= (2.625 / 2.75)) * t + 0.984375) + b;
        },
        bounceBoth: function(t, b, c, d) {
            if (t < d / 2) {
                return Tween['bounceIn'](t * 2, 0, c, d) * 0.5 + b;
            }
            return Tween['bounceOut'](t * 2 - d, 0, c, d) * 0.5 + c * 0.5 + b;
        }
    };

    function cssTransform(el, attr, val) {
        if (!el.transform) {
            el.transform = {}
        }
        if (typeof val == "undefined") {
            if (typeof el.transform[attr] == "undefined") {
                switch (attr) {
                    case "scale":
                    case "scaleX":
                    case "scaleY":
                        el.transform[attr] = 100;
                        break;
                    default:
                        el.transform[attr] = 0;
                }
            }
            return el.transform[attr];
        } else {
            var transformVal = "";
            el.transform[attr] = Number(val);
            for (var s in el.transform) {
                switch (s) {
                    case "rotate":
                    case "rotateX":
                    case "rotateY":
                    case "rotateZ":
                    case "skewX":
                    case "skewY":
                        transformVal += " " + s + "(" + el.transform[s] + "deg)";
                        break;
                    case "translateX":
                    case "translateY":
                    case "translateZ":
                        transformVal += " " + s + "(" + el.transform[s] + "px)";
                        break;
                    case "scale":
                    case "scaleX":
                    case "scaleY":
                        transformVal += " " + s + "(" + el.transform[s] / 100 + ")";
                        break;
                }
            }
            el.style.WebkitTransform = el.style.transform = transformVal;
        }
    }

    function css(element, attr, val) {
        if (attr == "rotate" || attr == "rotateX" ||
            attr == "rotateY" || attr == "rotateZ" ||
            attr == "scale" || attr == "scaleX" ||
            attr == "scaleY" || attr == "skewX" ||
            attr == "skewY" || attr == "translateX" ||
            attr == "translateY" || attr == "translateZ") {
            return cssTransform(element, attr, val);
        }
        if (arguments.length == 2) { //只要两个参数的时候是获取属性  
            var val = getComputedStyle(element)[attr];
            if (attr == 'opacity') {
                val = Math.round(val * 100); //透明的*100 减少小数误差  
            }
            return parseFloat(val);
        }
        if (attr == "opacity") {
            element.style.opacity = val / 100;
        } else {
            element.style[attr] = val + "px";
        }
    }

    function MTween(init) { //对tween进行再次封装  
        var t = 0; //当前计时  
        var b = {}; //当前值  
        var c = {}; //目标值和当前值得差  
        var d = init.time / 20; //终止时间  
        for (var s in init.target) {
            b[s] = css(init.el, s);
            c[s] = init.target[s] - b[s];
        }
        clearInterval(init.el.timer);
        init.el.timer = setInterval(
            function() {
                t++;
                if (t > d) {
                    clearInterval(init.el.timer);
                    init.callBack && init.callBack.call(init.el);
                } else {
                    init.callIn && init.callIn.call(init.el);
                    for (var s in b) {
                        var val = (Tween[init.type](t, b[s], c[s], d)).toFixed(2);
                        css(init.el, s, val);
                    }
                }
            },
            20
        );
    }
    </script>
    <script type="text/javascript">
    window.onload = function() {
        var div = document.querySelector('#div');

        MTween({
            el: div,
            target: {
                width: 400,
                height: 300,
                opacity: 50,
                rotate: 50,
            },
            time: 1000,
            type: "linear",
            callBack: function() {
                console.log("动画执行完了");
             /*   MTween({
                    el: div,
                    target: {
                        width: 200,
                        height: 100,
                        opacity: 20,
                        rotate: 10,
                    },
                    time: 1000,
                    type: "linear",
                    callBack: function() {
                        console.log("动画执行完了");
                    },
                    callIn: function() {
                        console.log("动画执行中");
                    }
                });*/
            },
            callIn: function() {
                console.log("动画执行中");
            }
        });

        /*  
            必写参数:  
                el 元素   
                target {} 目标点  
                time: 动画持续时间 (ms)     
                type: 动画类型 "string"  
            可选参数:  
                callBack: fn 回调函数(动画执行完之后,执行的函数)  
                callIn: fn  并发函数 (动画执行完中,执行的函数)  
        */
    };
    </script>
</head>

<body>
    <div id="div">
    </div>
</body>

</html>

如果过渡动画不能满足 那就用原版
http://down.htmleaf.com/1501/201501271734.zip
其实原版就是数值属性的变化 然后再update定时器中更新

php 开启微信公众号开发者模式

php 开启微信公众号开发者模式

<?php
/**
  * wechat php test
  */
header('Content-type:text');
//define your token
//定义TOKEN密钥
define("TOKEN", "weixin");
//实例化微信对象
$wechatObj = new wechatCallbackapiTest();
//验证成功后注释掉valid方法
$wechatObj->valid();
//开启自动回复功能
$wechatObj->responseMsg();
//定义类文件
class wechatCallbackapiTest
{
    //实现valid验证方法:实现对接微信公众平台
    public function valid()
    {
        //通过GET请求接收随机字符串
        $echoStr = $_GET["echostr"];
        //调用checkSignature方法进行用户(开发者)数字签名验证
        //valid signature , option
        if($this->checkSignature()){
            //如果成功,则返回接收到的随机字符串
            echo $echoStr;
            //并退出
            exit;
        }
    }

    public function responseMsg()
    {
        //get post data, May be due to the different environments
        //接收用户端(客户)发送过来的XML数据
        $postStr = $GLOBALS["HTTP_RAW_POST_DATA"];

          //extract post data
        //判断XML数据是否为空
        if (!empty($postStr)){
                /* libxml_disable_entity_loader is to prevent XML eXternal Entity Injection,
                   the best way is to check the validity of xml by yourself */
                libxml_disable_entity_loader(true);
                //通过simplexml进行xml解析     PHP中有两大类可以完成对XML的解析,1.PHP的Dom模型2.通过simplexml模型
                  $postObj = simplexml_load_string($postStr, 'SimpleXMLElement', LIBXML_NOCDATA);
                //手机端
                $fromUsername = $postObj->FromUserName;
                //微信公众平台
                $toUsername = $postObj->ToUserName;
                //接收用户发送的关键词
                $keyword = trim($postObj->Content);
                //时间戳
                $time = time();
                //文本发送模板
                $textTpl = "<xml>
                            <ToUserName><![CDATA[%s]]></ToUserName>
                            <FromUserName><![CDATA[%s]]></FromUserName>
                            <CreateTime>%s</CreateTime>
                            <MsgType><![CDATA[%s]]></MsgType>
                            <Content><![CDATA[%s]]></Content>
                            <FuncFlag>0</FuncFlag>
                            </xml>";   
                //判断用户发送关键词是否为空
                if(!empty( $keyword ))
                {
                    //回复类型,如果为"text",代表文本类型
                      $msgType = "text";
                    //回复内容
                    $contentStr = "Welcome to wechat world!";
                    //格式化字符串(对xml进行格式化操作,把里面相关的变量格式化成字符串)
                    $resultStr = sprintf($textTpl, $fromUsername, $toUsername, $time, $msgType, $contentStr);
                    //把XML数据返回给手机端
                    echo $resultStr;
                }
                //如果用户发送的关键词为空,则返回下列字符串
                else{
                    echo "Input something...";
                }

        }else {
            echo "";
            exit;
        }
    }
    
    //定义checkSignature方法
    private function checkSignature()
    {
        // you must define TOKEN by yourself
        
        //判断TOKEN密钥是否定义
        if (!defined("TOKEN")) {
            //如果没有定义则抛出异常,返回'TOKEN is not defined!'字符串
            throw new Exception('TOKEN is not defined!');
        }
        //接收微信加密签名
        $signature = $_GET["signature"];
        //接收时间戳信息
        $timestamp = $_GET["timestamp"];
        //接收随机数
        $nonce = $_GET["nonce"];
        //把TOKEN常量赋值给$token变量    
        $token = TOKEN;
        //把相关参数组装为数组(密钥文件、时间戳、随机数)
        $tmpArr = array($token, $timestamp, $nonce);
        // use SORT_STRING rule
        //通过字典法进行排序
        sort($tmpArr, SORT_STRING);
        //把排序后的数组转化为字符串
        $tmpStr = implode( $tmpArr );
        //通过哈希算法对字符串进行加密操作
        $tmpStr = sha1( $tmpStr );
        //与加密签名进行对比
        if( $tmpStr == $signature ){
            return true;
        }else{
            return false;
        }
    }
}

?>

1 TOKEN要跟微信公众号后台的TOKEN对应就行
2 $wechatObj->valid(); 微信公众号后台验证完就可以注释掉