add web animations api task

visugar · Jul 28, 2017 · 7d7573e · 7d7573e
1 parent d81af6c
commit 7d7573e
Show file tree

Hide file tree

Showing 2 changed files with 144 additions and 0 deletions.
diff --git a/11web_animations_api/index.html b/11web_animations_api/index.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>WAPPI实例</title>
+    <style>
+        .item{
+            width:100px;
+            height:100px;
+            border:4px;
+            background-color:#FFAEC9;
+            margin:20px 0 0 20px;
+            text-align:center;
+            line-height:100px;
+        }
+    </style>
+</head>
+<body>
+    <div class="item item0">点我额</div>
+    <div class="item item1">点我变小</div>
+    <div class="item item2">点我变大</div>
+<script>
+
+    var items = document.querySelectorAll(".item");
+
+    var ani00 = [
+        {transform:'rotate(0)',backgroundColor:'#FFAEC9'},
+        {backgroundColor:'#ED1C24',offset:0.7},
+        {transform:'rotate(360deg)',backgroundColor:'#FFAEC9'}
+    ];
+    var aniOpt00 = {
+        duration:3000,
+        iterations:Infinity
+    };
+
+    /*方块一的动画*/
+    var items00 = items[0].animate(ani00,aniOpt00);    //调用后立即执行 
+    items[0].addEventListener('click',function(){
+        if(items00.playState == 'running'){
+            items00.playbackRate = -1;
+        }else{
+            items00.playbackRate = 1;
+        }
+    });
+
+    /*方块二的动画*/
+    var ani01 = [
+        {transform:'scale(0.5)',borderRadius:'4px',backgroundColor:'#FFAEC9'},
+        {borderRadius:'50%',backgroundColor:'#59C6B3'},
+        {transform:'scale(1.3)',borderRadius:'4px',backgroundColor:'#FFAEC9'}
+    ];
+    var aniOpt01 = {
+        duration:2000,
+        iterations:1,
+        fill: 'both',
+        //easing:linear
+
+    }
+    function rotate(){
+       this.animate(ani01,aniOpt01);
+    }
+    items[1].addEventListener('click',rotate);
+
+</script>
+</body>
+</html>
diff --git a/11web_animations_api/other.html b/11web_animations_api/other.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>WAPPI实例</title>
+    <style>
+        .item {
+            width: 100px;
+            height: 100px;
+            border: 4px;
+            background-color: red;
+            margin: 20px 0 0 20px;
+            text-align: center;
+            line-height: 100px;
+        }
+
+        .item1 {
+            /*animation: rotate 4s infinite ease running;*/
+        }
+
+        @keyframes rotate {
+            0% {
+                transform:rotate(0);
+                background-color:red;
+            }
+            40% {
+                background-color:blue;
+            }
+            100% {
+                transform: rotate(360deg);
+                background-color: red;
+            }
+        }
+    </style>
+</head>
+
+<body>
+    <div class="item item1">点我额</div>
+    <script>
+
+    var item1 = document.querySelector(".item1");
+
+    var ani1 = [
+        {transform:'rotate(0)',backgroundColor:'red'},
+        {backgroundColor:'blue',offset:0.4},
+        {transform:'rotate(360deg)',backgroundColor:'red'}
+    ];
+    var aniOpt1 = {
+        duration:4000,
+        //iterations:Infinity,
+        iterations:3,
+        easing:'ease-in-out'
+    };
+
+    var rotateAni = item1.animate(ani1,aniOpt1);
+    rotateAni.currentTime = 3000;
+    setTimeout(function(){
+        console.log(rotateAni.currentTime);
+       // rotateAni.pause(); //在6秒后让动画暂停
+       //rotateAni.reverse(); //在6秒后方向执行
+        rotateAni.finish(); //(对有限次的动画)停止动画且直接跳到结束位置
+         //rotateAni.cancel(); // 取消动画过程，直接跳到动画的开始位置 
+        //rotateAni.playbackRate = 1.5;   //沿着原来的方向，使动画执行的更慢
+         console.log(rotateAni.currentTime);
+    },6000);
+
+    rotateAni.onfinish = function(){
+        console.log('我已完成动画了');
+    }
+    rotateAni.oncancel = function(){
+        console.log('我已取消动画额');
+    }
+
+</script>
+</body>
+
+</html>