react-动画的选择

单元素的动画

1 .传入animation对象这个参数,作为动画的开始参数

animation属性

1 .所有和动画有关的样式都可以操作

动画基本参数术语说明

1 .width:100 从当前元素的大小变化为100px
2 .maxWidth:100 元素当前最大宽度到100px
3 .minWidth:100 元素当前最小宽度到100px
4 .maxHeight,height
5 .opacity:0 元素当前透明度到0
6 .top: 元素当前顶部距离到100px,需要配合position:relative|absolute
7 .marginTop:100 元素当前顶部外边距到100px
8 .color:#fff 元素当前文字颜色到白色
9 .backgroundColor:#fff 元素当前背景颜色到白色
10 .borderWidth:5 元素当前边框宽度到2px
11 .borderColor:#fff 元素当前边框颜色变成白色
12 .boxShadow: 元素当前阴影变为这样
13 .borderRadius:5 当前元素圆角变为5px,可以左右上下使用
14 .textShadow: 当前文字影音变为这个样子
15 .##一些transform的变化规则
16 .x:10 :x的位置移动10px.注意这是最简单的写法
17 .y:10 :y的位置上移动10px.
18 .z:10 :z的位置上移动10px.
19 .rotate:10 以transformOrigin的中心点旋转10deg
20 .rotateX:10 以中心点向x方向旋转
21 .rotateY:10
22 .scale:
23 .scaleX
24 .scaleY
25 .transformOrigin:'50px 50px'元素当前中心点到50px 50px
26 .还有一些和filter有关的参数
27 .blur:'20px' 模糊到20px

以上是animate的变化参数,还有一些是属性参数,可以定义动画的属性

1 .type:动画播放的方向
2 .duration:动画持续的时间

帧动画

1 .animate传入一个数组,每一个数组代表一个帧。
2 .为什么官方的例子里面一开始的值没有放在state里面,而是直接放在了全局里面,那这样怎么修改动画的状态啊。
3 .这个改变动画的方法有点奇怪,还是把所有的帧都放在一个数组里面,然后每一次拿出其中的一项变成这个animation的参数,传到里面,实时渲染,下一次重复这个动作,这个传是检测不到两个前后数据的不一样的地方,仅仅做的是每次粗暴的替换全体。
4 .

你可能感兴趣的:(react-动画的选择)