福
福

雨辰枫司的小栈

flip技术

  • ~1.74K 字
  • 条评论
  1. 1. FLIP
    1. 1.1. First
    2. 1.2. Last
    3. 1.3. Invert
    4. 1.4. Play
    5. 1.5. 示例代码

FLIP

  • FLIP就是First、Last、Invert、Play。

First

表示转换元素的初始状态。

Last

表示转换元素的最终状态。

Invert

通过transform反转First和Last之间的变化。例如First在向下移动90px得到Last，就将Last在向上移动90px，让它看起来像First。

Play

将Invert的变化删除，让Last回到原来的位置。

示例代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
class Flip {
    constructor(element, options = null) {
        this.element = element;
        // 记录First状态
        this.first = element.getBoundingClientRect();
        this.options = options ? options : {
            duration: 500,
            easing: 'ease-in-out'
        };
    }
    // 更新First
    updateFirst(){
        this.first = this.element.getBoundingClientRect();
    }

    // 播放动画
    play(options=null){
        // 当改变element样式时，调用play，记录Last状态
        let last = this.element.getBoundingClientRect();
        // 变化的值，这里用first和last的差值（因为要将Last变化到First）
        let delta = {
            x: this.first.x - last.x,
            y: this.first.y - last.y,
            width: this.first.width / last.width,
            height: this.first.height / last.height
        };
        let player = this.element.animate([
            // 将Last变化到First
            {
                transformOrigin: 'top left',
                transform: `
                translate(${delta.x}px, ${delta.y}px) 
                scale(${delta.width}, ${delta.height})`
            },
            // 清除变化
            {
                transformOrigin: 'top left',
                transform: 'none'
            }
        ], options ? options : this.options);
        player.onfinish = () => {
            this.updateFirst();
        };
    }
}
,