作者归档:misster-kaiji

svg过渡动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>svg-circle</title>
    <style>
        .route{
            width:26px;
            height:26px;
            -webkit-animation: route 3s linear infinite;
            animation: route 3s linear infinite;
        }
        .spinner{
            -webkit-animation: rotator 2s linear infinite;
            animation: rotator 2s linear infinite;
        }
        .path {
            stroke-dasharray: 187;
            stroke-dashoffset: 50;
            -webkit-transform-origin: center;
            transform-origin: center;
            stroke: #4285F4;
            -webkit-animation: dash 2s ease-in-out infinite;
            animation: dash 2s ease-in-out infinite;
        }
        @keyframes rotator {
            0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg)
            }

            100% {
                -webkit-transform: rotate(270deg);
                transform: rotate(270deg);
                -ms-transform: rotate(360deg)
            }
        }
        @keyframes route {
            0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg)
            }

            100% {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
                -ms-transform: rotate(360deg)
            }
        }
        @keyframes dash {
            0% {
                stroke-dashoffset: 187;
            }
           
            50% {
                stroke-dashoffset: 46.75;
                -webkit-transform: rotate(135deg);
                transform: rotate(135deg);
            }
           
            100% {
                stroke-dashoffset: 187;
                -webkit-transform: rotate(450deg);
                transform: rotate(450deg);
            }
        }
    </style>
</head>
<body>
    <div class="route">
        <svg class="spinner" width="26px" height="26px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
            <circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30" style="stroke:#4288ed"></circle>
        </svg>
    </div>
</body>
</html>

demo:http://kaiji.obyee.com/demo/svg_circle.html

有趣的canvas时间展示动画

该项目在 github上一毛一样的代码太多,已经找不到原作者
贴一下代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <canvas id="canvas"></canvas>
    <script>
        (function () {

                var digit =
                    [
                        [
                            [0, 0, 1, 1, 1, 0, 0],
                            [0, 1, 1, 0, 1, 1, 0],
                            [1, 1, 0, 0, 0, 1, 1],
                            [1, 1, 0, 0, 0, 1, 1],
                            [1, 1, 0, 0, 0, 1, 1],
                            [1, 1, 0, 0, 0, 1, 1],
                            [1, 1, 0, 0, 0, 1, 1],
                            [1, 1, 0, 0, 0, 1, 1],
                            [0, 1, 1, 0, 1, 1, 0],
                            [0, 0, 1, 1, 1, 0, 0]
                        ],//0
                        [
                            [0, 0, 0, 1, 1, 0, 0],
                            [0, 1, 1, 1, 1, 0, 0],
                            [0, 0, 0, 1, 1, 0, 0],
                            [0, 0, 0, 1, 1, 0, 0],
                            [0, 0, 0, 1, 1, 0, 0],
                            [0, 0, 0, 1, 1, 0, 0],
                            [0, 0, 0, 1, 1, 0, 0],
                            [0, 0, 0, 1, 1, 0, 0],
                            [0, 0, 0, 1, 1, 0, 0],
                            [1, 1, 1, 1, 1, 1, 1]
                        ],//1
                        [
                            [0, 1, 1, 1, 1, 1, 0],
                            [1, 1, 0, 0, 0, 1, 1],
                            [0, 0, 0, 0, 0, 1, 1],
                            [0, 0, 0, 0, 1, 1, 0],
                            [0, 0, 0, 1, 1, 0, 0],
                            [0, 0, 1, 1, 0, 0, 0],
                            [0, 1, 1, 0, 0, 0, 0],
                            [1, 1, 0, 0, 0, 0, 0],
                            [1, 1, 0, 0, 0, 1, 1],
                            [1, 1, 1, 1, 1, 1, 1]
                        ],//2
                        [
                            [1, 1, 1, 1, 1, 1, 1],
                            [0, 0, 0, 0, 0, 1, 1],
                            [0, 0, 0, 0, 1, 1, 0],
                            [0, 0, 0, 1, 1, 0, 0],
                            [0, 0, 1, 1, 1, 0, 0],
                            [0, 0, 0, 0, 1, 1, 0],
                            [0, 0, 0, 0, 0, 1, 1],
                            [0, 0, 0, 0, 0, 1, 1],
                            [1, 1, 0, 0, 0, 1, 1],
                            [0, 1, 1, 1, 1, 1, 0]
                        ],//3
                        [
                            [0, 0, 0, 0, 1, 1, 0],
                            [0, 0, 0, 1, 1, 1, 0],
                            [0, 0, 1, 1, 1, 1, 0],
                            [0, 1, 1, 0, 1, 1, 0],
                            [1, 1, 0, 0, 1, 1, 0],
                            [1, 1, 1, 1, 1, 1, 1],
                            [0, 0, 0, 0, 1, 1, 0],
                            [0, 0, 0, 0, 1, 1, 0],
                            [0, 0, 0, 0, 1, 1, 0],
                            [0, 0, 0, 1, 1, 1, 1]
                        ],//4
                        [
                            [1, 1, 1, 1, 1, 1, 1],
                            [1, 1, 0, 0, 0, 0, 0],
                            [1, 1, 0, 0, 0, 0, 0],
                            [1, 1, 1, 1, 1, 1, 0],
                            [0, 0, 0, 0, 0, 1, 1],
                            [0, 0, 0, 0, 0, 1, 1],
                            [0, 0, 0, 0, 0, 1, 1],
                            [0, 0, 0, 0, 0, 1, 1],
                            [1, 1, 0, 0, 0, 1, 1],
                            [0, 1, 1, 1, 1, 1, 0]
                        ],//5
                        [
                            [0, 0, 0, 0, 1, 1, 0],
                            [0, 0, 1, 1, 0, 0, 0],
                            [0, 1, 1, 0, 0, 0, 0],
                            [1, 1, 0, 0, 0, 0, 0],
                            [1, 1, 0, 1, 1, 1, 0],
                            [1, 1, 0, 0, 0, 1, 1],
                            [1, 1, 0, 0, 0, 1, 1],
                            [1, 1, 0, 0, 0, 1, 1],
                            [1, 1, 0, 0, 0, 1, 1],
                            [0, 1, 1, 1, 1, 1, 0]
                        ],//6
                        [
                            [1, 1, 1, 1, 1, 1, 1],
                            [1, 1, 0, 0, 0, 1, 1],
                            [0, 0, 0, 0, 1, 1, 0],
                            [0, 0, 0, 0, 1, 1, 0],
                            [0, 0, 0, 1, 1, 0, 0],
                            [0, 0, 0, 1, 1, 0, 0],
                            [0, 0, 1, 1, 0, 0, 0],
                            [0, 0, 1, 1, 0, 0, 0],
                            [0, 0, 1, 1, 0, 0, 0],
                            [0, 0, 1, 1, 0, 0, 0]
                        ],//7
                        [
                            [0, 1, 1, 1, 1, 1, 0],
                            [1, 1, 0, 0, 0, 1, 1],
                            [1, 1, 0, 0, 0, 1, 1],
                            [1, 1, 0, 0, 0, 1, 1],
                            [0, 1, 1, 1, 1, 1, 0],
                            [1, 1, 0, 0, 0, 1, 1],
                            [1, 1, 0, 0, 0, 1, 1],
                            [1, 1, 0, 0, 0, 1, 1],
                            [1, 1, 0, 0, 0, 1, 1],
                            [0, 1, 1, 1, 1, 1, 0]
                        ],//8
                        [
                            [0, 1, 1, 1, 1, 1, 0],
                            [1, 1, 0, 0, 0, 1, 1],
                            [1, 1, 0, 0, 0, 1, 1],
                            [1, 1, 0, 0, 0, 1, 1],
                            [0, 1, 1, 1, 0, 1, 1],
                            [0, 0, 0, 0, 0, 1, 1],
                            [0, 0, 0, 0, 0, 1, 1],
                            [0, 0, 0, 0, 1, 1, 0],
                            [0, 0, 0, 1, 1, 0, 0],
                            [0, 1, 1, 0, 0, 0, 0]
                        ],//9
                        [
                            [0, 0, 0, 0, 0, 0, 0],
                            [0, 0, 0, 1, 0, 0, 0],
                            [0, 0, 1, 1, 1, 0, 0],
                            [0, 0, 0, 1, 0, 0, 0],
                            [0, 0, 0, 0, 0, 0, 0],
                            [0, 0, 0, 0, 0, 0, 0],
                            [0, 0, 0, 1,0, 0, 0],
                            [0, 0, 1, 1, 1, 0, 0],
                            [0, 0, 0, 1, 0, 0, 0],
                            [0, 0, 0, 0, 0, 0, 0]
                        ]//:
                    ];

                var canvas = document.getElementById('canvas');

                if (canvas.getContext) {
                    var cxt = canvas.getContext('2d');
                    //声明canvas的宽高
                    var H = 100, W = 700;
                    canvas.height = H;
                    canvas.width = W;
                    cxt.fillStyle = '#f00';
                    cxt.fillRect(10, 10, 50, 50);

                    //存储时间数据
                    var data = [];
                    //存储运动的小球
                    var balls = [];
                    //设置粒子半径
                    var R = canvas.height / 20 - 1;
                    (function () {
                        var temp = /(\d)(\d):(\d)(\d):(\d)(\d)/.exec(new Date());
                        //存储时间数字,由十位小时、个位小时、冒号、十位分钟、个位分钟、冒号、十位秒钟、个位秒钟这7个数字组成
                        data.push(temp[1], temp[2], 10, temp[3], temp[4], 10, temp[5], temp[6]);
                    })();

                    /*生成点阵数字*/
                    function renderDigit(index, num) {
                        for (var i = 0; i < digit[num].length; i++) {
                            for (var j = 0; j < digit[num][i].length; j++) {
                                if (digit[num][i][j] == 1) {
                                    cxt.beginPath();
                                    cxt.arc(14 * (R + 2) * index + j * 2 * (R + 1) + (R + 1), i * 2 * (R + 1) + (R + 1), R, 0, 2 * Math.PI);
                                    cxt.closePath();
                                    cxt.fill();
                                }
                            }
                        }
                    }

                    /*更新时钟*/
                    function updateDigitTime() {
                        var changeNumArray = [];
                        var temp = /(\d)(\d):(\d)(\d):(\d)(\d)/.exec(new Date());
                        var NewData = [];
                        NewData.push(temp[1], temp[2], 10, temp[3], temp[4], 10, temp[5], temp[6]);
                        for (var i = data.length - 1; i >= 0; i--) {
                            //时间发生变化
                            if (NewData[i] !== data[i]) {
                                //将变化的数字值和在data数组中的索引存储在changeNumArray数组中
                                changeNumArray.push(i + '_' + (Number(data[i]) + 1) % 10);
                            }
                        }
                        //增加小球
                        for (var i = 0; i < changeNumArray.length; i++) {
                            addBalls.apply(this, changeNumArray[i].split('_'));
                        }
                        data = NewData.concat();
                    }

                    /*更新小球状态*/
                    function updateBalls() {
                        for (var i = 0; i < balls.length; i++) {
                            balls[i].stepY += balls[i].disY;
                            balls[i].x += balls[i].stepX;
                            balls[i].y += balls[i].stepY;
                            if (balls[i].x > W + R || balls[i].y > H + R) {
                                balls.splice(i, 1);
                                i--;
                            }
                        }
                    }

                    /*增加要运动的小球*/
                    function addBalls(index, num) {
                        var numArray = [1, 2, 3];
                        var colorArray = ["#3BE", "#09C", "#A6C", "#93C", "#9C0", "#690", "#FB3", "#F80", "#F44", "#C00"];
                        for (var i = 0; i < digit[num].length; i++) {
                            for (var j = 0; j < digit[num][i].length; j++) {
                                if (digit[num][i][j] == 1) {
                                    var ball = {
                                        x: 14 * (R + 2) * index + j * 2 * (R + 1) + (R + 1),
                                        y: i * 2 * (R + 1) + (R + 1),
                                        stepX: Math.floor(Math.random() * 4 - 2),
                                        stepY: -2 * numArray[Math.floor(Math.random() * numArray.length)],
                                        color: colorArray[Math.floor(Math.random() * colorArray.length)],
                                        disY: 1
                                    };
                                    balls.push(ball);
                                }
                            }
                        }
                    }

                    /*渲染*/
                    function render() {
                        //重置画布宽度,达到清空画布的效果
                        canvas.height = 100;
                        //渲染时钟
                        for (var i = 0; i < data.length; i++) {
                            renderDigit(i, data[i]);
                        }
                        //渲染小球
                        for (var i = 0; i < balls.length; i++) {
                            cxt.beginPath();
                            cxt.arc(balls[i].x, balls[i].y, R, 0, 2 * Math.PI);
                            cxt.fillStyle = balls[i].color;
                            cxt.closePath();
                            cxt.fill();
                        }
                    }

                    clearInterval(oTimer);
                    var oTimer = setInterval(function () {
                        //更新时钟
                        updateDigitTime();
                        //更新小球状态
                        updateBalls();
                        //渲染
                        render();
                    }, 50);
                }

            })();
        </script>
</body>
</html>

github : https://github.com/search?p=1&q=updateDigitTime&type=Code&utf8=%E2%9C%93
查看demo:http://kaiji.obyee.com/demo/canvasTime.html

(备忘) 让CSS3的Animation动画定格在最后

有时候用CSS3的Animation属性做动效演示,发现动画结束后总是自动回到最初始的一帧,如果想让动画定格在最后100%时的状态,之前的做法一直是在动画结束时通过回调函数用js直接把状态样式添加上去,虽然能解决问题,但感觉这样做很笨。

直到今天,才看到了这个属性:
animation-fill-mode
这条属性就是用来设置元素在动画完成后的样子

它接受的参数有三种状态:
backward/forward/both

backward:元素退回动画前的样子
forward:元素显示成动画完成后的样子
both:元素显示成动画前后的样子

这样就可以解决问题了
另:附上 说明文档 animation-fill-mode – CSS3参考手册
注:以上内容转载自 fangye Xu

基于jquery/zepto的 城市选择列表组件

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>城市选择列表</title>
    <link rel="stylesheet" href="index.css">
</head>

<body>
    <div class="city-outer">
        <div class="citylist">
            <div class="list-wrapper">
                <div id="J_listContent" class="city-listview">
                   
                </div>
            </div>
        </div>
    </div>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="scroll.min.js"></script>
    <script src="citydata.js"></script>
    <script src="index.js"></script>
</body>

</html>

查看demo:http://kaiji.obyee.com/demo/cityList/index.html
github: https://github.com/kaijiyoung/city-scroll-list

小程序父组件利用triggerEvent调用子组件的回调函数

当子组件状态发生改变,如何通知到父组件做相应操作呢?
子组件实例可以为自己绑定一个自定义事件(可以理解为创建一个回调函数)
触发该自定义事件的方法 就是 triggerEvent
用法如下:

父组件中绑定和使用自定义事件
注意:bind 后面myevent为事件名 会区分大小写 如果触发事件this.triggerEvent(‘myevent’)使用的是 小写 绑定事件bindmyevent=”callback”也要是 小写

<tabBar bindmyevent="callback"></tabBar>

子组件中的事件

<view bindtap="eventHandler"></view>

触发自定义事件

eventHandler:function(){
      var myEventDetail = {} // detail对象,提供给事件监听函数 detail为子组件的事件对象
      var myEventOption = {} // 触发事件的选项
      this.triggerEvent('myevent', myEventDetail, myEventOption)
}