【体测代码解析】——前端

exportconstflyIn=trigger('flyIn',[
state('in',style({transform:'translateX(0)'})),
transition('void=>*',[
animate(300,keyframes([
style({opacity:0,transform:'translateX(-100%)',offset:0}),
style({opacity:1,transform:'translateX(25px)',offset:0.3}),
style({opacity:1,transform:'translateX(0)',offset:1.0})
]))
]),
])

1、 trigger  触发器

 `trigger`是一个动画特定的函数，触发器，`trigger`将根据提供的`name`值创建一个动画触发器

trigger("myAnimationTrigger", [
       state(...),
       state(...),
       transition(...),
       transition(...)
])

2、state 状态

`state`是一个动画特定的函数，状态，每个状态都定义了最终的样式(动效过后的最终样子);通过改变状态(state)来触发(trigger)动画(animate)

 

state('A', style...)

3、transition 转换

`transition`是一个动画特定的函数，负责定义各种 state 之间错综复杂的转换关系

 

3、transition 转换

`transition`是一个动画特定的函数，负责定义各种 state 之间错综复杂的转换关系

transition('A => B', animate...)
transition('A <=> B', animate...)
transition('* => *', animate...) 
transition(':enter', animate...)
transition(':leave', animate...)
transition('* => void', animate...)  也等于 :leave
transition('void => *', animate...)  也等于 :enter
transition((fromState, toState) => boolean, animate...) 还可以写方法判断哦 
transition('A => B',[style,animate]) style 也可以放进来哦.
transition('A => B',[animate,animate]) 数组 animate 会按序执行和 transition('A => B', sequence([animate,animate])) 是一样的 
transition('A => B',group([animate,animate])) 不想按序执行可以使用 group,表示里的动画同时进行。

4、style  样式

`style`是一个动画特定的函数，就是定义 css 

style({backgroundColor: "red"})

 

5、animate 动画

`animate`是一个动画特定的函数，表示具体的动画定义

 

animate("5s 10ms cubic-bezier(.17,.67,.88,.1)", style(...))

//duration= 5second
//delay=10ms
//easing= cubic-bezier (ease-out 等等 css 有的都可以放)
//最后加上 style 就可以动画了咯

//如果想按帧来执行可以这样做
animate("5s", keyframes([
    style({opacity: 0, offset: 0}),
    style({opacity: 1, offset: 0.3})
]))
//offset 0.3 是百分比  这里和css3的动画是一样意思，

 

7、keyframes 关键帧

`keyframes`是一个动画特定的函数，可以描述每个样式条目是如何应用的，以及在什么点动画弧（很像CSS关键帧动画