week14

vivien1216 · Nov 1, 2020 · 45329ae · 45329ae
1 parent 31af3d6
commit 45329ae
Show file tree

Hide file tree

Showing 11,267 changed files with 1,058,442 additions and 1 deletion.
diff --git a/.DS_Store b/.DS_Store
diff --git a/week14/.DS_Store b/week14/.DS_Store
diff --git a/week14/NOTE.md b/week14/NOTE.md
@@ -1 +1,17 @@
-学习笔记
+<!--
+ * @Author: vivien
+ * @Date: 2020-07-26 20:35:27
+ * @Last Modified by: vivien
+ * @LastEditTime: 2020-11-01 12:24:20
+-->
+学习笔记
+
+## setInterval() setTimeout() window.requestAnimationFrame()
+setInterval()重复调用，除非使用clearInterval()清除
+setTimeout()在指定时间内调用一次，可以调用自身达到setInterval()的效果
+window.requestAnimationFrame()告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行
+
+## Symbol的使用
+在声明变量时，使用Symbol，可以避免与其他属性名产生冲突
+
+## 手势与动画的代码练习
diff --git a/week14/jsx/.DS_Store b/week14/jsx/.DS_Store
diff --git a/week14/jsx/animation-demo.js b/week14/jsx/animation-demo.js
@@ -0,0 +1,22 @@
+/*
+ * @Author: vivien
+ * @Date: 2020-10-28 22:43:02
+ * @Last Modified by: vivien
+ * @LastEditTime: 2020-10-31 23:11:16
+ */
+import { Timeline, Animation} from './animation.js';
+import { ease, easeIn } from './ease.js';
+
+let tl = new Timeline();
+
+tl.start();
+
+
+tl.add(new Animation(document.querySelector("#el").style, "transform", 0, 500, 2000, 0, easeIn, v => `translateX(${v}px)`));
+
+document.querySelector('#el2').style.transition = 'transform 2s ease-in';
+document.querySelector('#el2').style.transform = 'translateX(500px)';
+
+document.querySelector('#pause-btn').addEventListener('click', () => { tl.pause() })
+
+document.querySelector('#resume-btn').addEventListener('click', () => { tl.resume() })
diff --git a/week14/jsx/animation.html b/week14/jsx/animation.html
@@ -0,0 +1,13 @@
+<!--
+ * @Author: vivien
+ * @Date: 2020-10-28 22:41:36
+ * @Last Modified by: vivien
+ * @LastEditTime: 2020-10-31 22:39:50
+-->
+<body>
+    <div id="el" style="width:100px;height:100px;background-color:lightpink;"></div>
+    <div id="el2" style="width:100px;height:100px;background-color:lightgreen;"></div>
+    <button id="pause-btn">pause</button>
+    <button id="resume-btn">resume</button>
+    <script type="module" src="./animation-demo.js"></script>
+</body>
diff --git a/week14/jsx/animation.js b/week14/jsx/animation.js
@@ -0,0 +1,106 @@
+/*
+ * @Author: vivien
+ * @Date: 2020-10-27 22:30:37
+ * @Last Modified by: vivien
+ * @LastEditTime: 2020-10-31 23:54:42
+ */
+const TICK  = Symbol('tick');
+const TICK_HANDLE = Symbol('tick-handle');
+const ANIMATIONS = Symbol('animations');
+const START_TIME = Symbol('start-time');
+const PAUSE_START = Symbol('pause-start');
+const PAUSE_TIME = Symbol('pause-time');
+
+
+export class Timeline {
+    constructor(){
+        this.state = 'Inited'
+       this[ANIMATIONS] = new Set();
+       this[START_TIME] = new Map();
+    }
+    start() {
+        if(this.state !== 'Inited'){
+            return;
+        }
+        this.state = 'started';
+        let startTime = Date.now();
+        this[PAUSE_TIME] = 0;
+        this[TICK] = () => {
+            let now = Date.now();
+            for(let animation of this[ANIMATIONS]){
+                let t;
+                if(this[START_TIME].get(animation) < startTime){
+                    t = now - startTime - this[PAUSE_TIME] - animation.delay
+                } else {
+                    t = now - this[START_TIME].get(animation) - this[PAUSE_TIME] - animation.delay
+                }
+
+                if(t > animation.duration){
+                    this[ANIMATIONS].delete(animation)
+                    t = animation.duration
+                }
+                if(t > 0){
+                   animation.receive(t);
+                }
+            }
+            this[TICK_HANDLE] = requestAnimationFrame(this[TICK]);
+        }
+       this[TICK]();
+    }
+
+    pause() {
+        if(this.state !== 'started'){
+            return;
+        }
+        this.state = 'paused';
+        this[PAUSE_START] = Date.now();
+        cancelAnimationFrame(this[TICK_HANDLE]);
+    }
+    resume() {
+        if(this.state !== 'paused'){
+            return
+        }
+        this.state = 'started';
+       this[PAUSE_TIME] += Date.now() - this[PAUSE_START];
+       this[TICK]();
+    }
+
+    reset(){
+       this.state = 'Inited';
+       this.pause();
+       let startTime = Date.now();
+       this[PAUSE_TIME] = 0;
+       this[ANIMATIONS] = new Set();
+       this[START_TIME] = new Map();
+       this[PAUSE_START] = 0;
+       this[TICK_HANDLE] = null;
+    }
+
+    add(animation, addTime){
+        if(arguments.length < 2) {
+            addTime = Date.now();
+        }
+        this[ANIMATIONS].add(animation);
+        this[START_TIME].set(animation, addTime);
+    }
+}
+
+export class Animation {
+    constructor(object, property, startValue, endValue, duration, delay, timingFunction, template) {
+        timingFunction = timingFunction || (v => v);
+        template = template || (v => v);
+        this.object = object;
+        this.property = property;
+        this.startValue = startValue;
+        this.endValue = endValue;
+        this.duration = duration;
+        this.timingFunction = timingFunction;
+        this.delay = delay;
+        this.template = template;
+    }
+    receive(time){
+        let range = (this.endValue - this.startValue);
+        let progress = this.timingFunction(time / this.duration);
+        this.object[this.property] = this.template(this.startValue + range * progress)
+    }
+}
diff --git a/week14/jsx/carousel.js b/week14/jsx/carousel.js
@@ -0,0 +1,92 @@
+/*
+ * @Author: vivien
+ * @Date: 2020-10-27 22:29:00
+ * @Last Modified by: vivien
+ * @LastEditTime: 2020-10-27 22:45:36
+ */
+import { Component, createElement } from './framework.js';
+
+
+export class Carousel extends Component {
+    constructor() {
+        super();
+        this.attributes = Object.create(null);
+    }
+    setAttribute(name, value) {
+        this.attributes[name] = value;
+    }
+    render() {
+        this.root = document.createElement('div');
+        this.root.classList.add('carousel');
+        for(let record of this.attributes.src) {
+            let child = document.createElement('div');
+            child.style.backgroundImage = `url('${record}')`;
+            this.root.appendChild(child);
+        }
+
+        let position = 0;
+        this.root.addEventListener('mousedown', event => {
+            let startX = event.clientX;
+            let children = this.root.children;
+
+            let move = event => {
+                let x = event.clientX - startX;
+
+                let current = position - Math.round((x- x % 500) / 500);
+
+                for(let offset of [-1, 0 ,1]) {
+                    let pos  = current + offset;
+                    pos = (pos + children.length) % children.length
+                    children[pos].style.transition = 'none';
+                    children[pos].style.transform = `translateX(${- pos * 500 + offset * 500 + x % 500}px)`
+                }
+
+            }
+
+            let up = event => {
+                let x = event.clientX - startX;
+                position = position - Math.round(x / 500);
+                for(let offset of [0,-Math.sign(Math.round(x / 500) - x + 250 * Math.sign(x))]) {
+                    let pos  = position + offset;
+                    pos = (pos + children.length) % children.length
+                    children[pos].style.transition = '';
+                    children[pos].style.transform = `translateX(${- pos * 500 + offset * 500}px)`
+                }
+
+
+                document.removeEventListener('mousemove', move);
+                document.removeEventListener('mouseup', up);
+            }
+
+             document.addEventListener('mousemove', move);
+             document.addEventListener('mouseup', up);
+
+
+        })
+
+        // let currentIndex = 0;
+        // setInterval(() => {
+        //     let children = this.root.children;
+        //     let nextIndex = (currentIndex+1) % children.length;
+
+        //     let current = children[currentIndex];
+        //     let next = children[nextIndex];
+
+        //     next.style.transition = 'none';
+        //     next.style.transform = `translateX(${100 - nextIndex * 100}%)`
+
+        //     setTimeout(() => {
+        //         next.style.transition = '';
+        //         current.style.transform = `translateX(${-100 - currentIndex * 100}%)`
+        //         next.style.transform = `translateX(${- nextIndex * 100}%)`
+
+        //         currentIndex = nextIndex;
+        //     }, 16)
+
+        // }, 3000)
+        return this.root;
+    }
+    mountTo(parent){
+        parent.appendChild(this.render())
+    }
+}