上篇博客我们聊了RN中关于Timing的动画,详情请参见于《ReactNative之结合具体示例来看RN中的的Timing动画》本篇博客我们将从一个“拉皮条”的一个动画说起,然后来看一下RN中Spring动画的使用方式以及具体效果。Spring从名字中不难看出是弹性弹簧的意思,也就是我们可以使用Spring这个动画来实现一些弹性的动画效果。本部分我们先通过一个“拉皮条”的示例来简单的看一下Spring动画的使用方式,然后在看一下Spring动画中可配置的属性以及每个属性的作用。
一、从“拉皮条”谈起
此拉皮条非彼“拉皮条”,此拉皮条是正经拉皮条,简单的说,就是有一个皮条,我们用劲拉他,然后再松开观察皮条的运行轨迹。下方就是我们“拉皮条”的示例,在这个“拉皮条”的示例中,我们主要使用了Animation中的Spring动画。下方这个Demo中这个灰色的带子就是我们要拉的皮条,一边是黑色的固定皮条的东西,一端是可以拉动的红色方框,我们往一边拉动红色方块,这个皮条就会被拉伸,放手后皮条就会拉动我们的方块到原位置,当然这个拉动的过程中是符合弹簧拉伸效果的。
下方是调整方块质量的操作区,从下方效果中不难看出,当质量越大时惯性就越大,方块来回摆动的幅度就越大,这也是符合弹簧的特性的。
效果就是这么个效果,接下来,我们来看一下上述效果的具体代码实现,代码也不算太多,下方会把核心的代码拿出来聊聊。首先来看一下上述示例中用到的State。在State中有三个值,如下所示:
-
animationValue: 该值的类型为 Animated.ValueXY,ValueXY存放的是{x, y}的对象,其中这个x的值就是拖动后皮条拉伸后的X值,这个y值我们用来设置皮条的粗细度,也就是皮条的height。
-
mass: 然后就是这个mass(质量),我们用他来存放方块的质量的。
-
moveX: 该值用来存放手指移动时的X值的,用作在移动时实时更新皮条的拉伸度以及方块位置。
看完上述的State,接下来我们来看一下本Demo中涉及的手势操作。下方的这个 DisplayView 就是整个皮条以及方块所在的父View。下方是该View所涉及的手势操作:
-
onStartShouldSetResponder: 首先通过该属性开启手势相应者,在该属性接收到方法中返回true来打开响应者。
-
onResponderMove: 该属性所设置的方法就是是手指移动时所执行的回调,对应着iOS中的 touchMove 事件。通过该事件我们可以实时的拿到移动过程中的相关坐标。
-
onResponderRelease: 该属性所对应的方法会在手指离开屏幕时触发,我们可以在该事件中来打开 “皮条” 收缩的动画。
而下方截图中的这个 touchUp 事件就是手指离开屏幕时所触发的动作。在该事件中,我们更新了 State 中的moveX,我们使用的是pageX,也就是相对应页面的X值,这个MoveX我们设置的是方块的中心位置,根据具体的布局,我们需要做个 45 的纠正,这个纠正后的值就是方块要移动的地方。简单的说也就是手指移动的地方就是方块的中心点。设置完 MoveX 后,我们就开启了Spring动画,这个方块就会随着皮条的拉动往回走。
而这个 MoveView 方法就是随着手指的移动试试的更新State中的MoveX的值,而方块的位置就是根据这个State中MoveX的值决定的。
上述是我们本次动画中所涉及的几个事件,当然还有其他好多的手势事件,以后有机会可以在其他博客中详细的来介绍一下RN中常用的手势操作,关于手势在此就不做过多赘述了。
下方就是上述在 touchUp 方法中调用的启动Spring动画的相关方法,代码比较简单。就是设置了一下animation的目标值,及下方的animationValue, 以及设置了一下Spring动画的配置对象,即下方的config对象,其中的 mass 就是本示例中方块的质量。具体代码如下所示:
下方代码就是对应的就是红色方块的代码实现,在该代码中,我们为方块动态设置了 left。在手动滑动时,这个left的值随着手指移动的位置变化而变化,而当开始动画时,这个Left的值对应的就是 animationValue 中的x的值。具体如下所示:
关于本次这个 “拉皮条” 的示例的介绍就先到这儿,毕竟篇幅有限,下方是上述示例的完整代码:
二、“拉皮条” XS Max版本
Spring动画有好多属性,这些属性对应着弹簧的各个物理特性,下方这个Demo 是上述“拉皮条”的一个升级版本,通过该Demo,我们可以很好的来观察Spring动画中各个属性的作用,从而可以判断相关属性的各个使用场景。下方是“拉皮条” 的XS Max 版本。
备注:在上面第一个gif的最后有一个报错,下方是具体的报错内容,该错误的原因是我们设置的Spring的动画属性中冲突了。根据提示我们不难发现那些属性会冲突。我们可以根据错误提示把属性分为三组,(bounciness、speed ), (tenson、friction)以及(stiffness、damping、mass)如果设置了其中一个组的任何一个属性,那么其他两组中的属性都能再设置了,因为设置完后违反弹簧相关的物理定律,是不合规的,所以会报错。
You can define one of bounciness/speed, tenson/friction, or stiffness/damping/mass, but not more than one。
下方是该Demo中所涉及的属性:
1、friction - 摩擦力
“摩擦摩擦,在光滑的地板上摩擦……”,关于什么是摩擦力就不多说了,因为大家都知道穿着滑板鞋在光滑的地板上摩擦~摩擦~。该属性对应的就是滑块的摩擦力,根据物理常识摩擦力越大滑块被皮条拉伸的也就越慢,当摩擦力达到一定程度时,滑块就是匀速的运动了,而不是拉不动的情况,下方是具体的表现效果:
2、tension - 张力
"张力,物理学名词。物体受到拉力作用时,存在于其内部而垂直于两邻部分接触面上的相互牵引力。", 额~上面就是张力的解释,从物理字面量看,张力越大,方块被拉回的速度也就越快。下方这个Demo就能体现出这一点。从下方的图片中不难看出,随着张力的逐渐增大,这个方块被拉回的速度也就越快。
从上面的备注中我们可知,张力是可以和摩擦力一块设置的,所以下方我们设置tension的时候,也选中了friction。摩擦力大的话会使张力对滑块的作用力减小,这也是符合物理规律的。
3、bounciness - 抖
一个字儿概括就是“抖”,bounciness的值越大,这个滑块被拉回来是抖的就越厉害。下方就是这个“抖”的具体示例,从下方不难看出这个抖的值越大,方块回去时就越抖。
4、speed - 速度
速度及滑块被“皮条”拉回的速度, 当这个 speed 的值越大时,滑块就越容易被拉回,而且speed是可以和上面的“抖”bounciness一块设置的。下方就是Speed的相关效果。
5、stiffness - 刚度
刚度这个玩意儿也是个物理名词,刚度指材料或结构在受力时抵抗弹性变形的能力。通过这个解释我们不难看出,刚度越大,说明弹簧越不容易变形,越不容易变形的情况下,如果拉伸后就越快的恢复原形。对于这个刚度可以简单的理解为弹簧的刚度越好,那么这个弹簧的弹性就越好。下方就是刚度的表现:
6、damping - 阻尼
阻尼(damping) 的物理意义是力的衰减,或物体在运动中的能量耗散。通俗地讲,就是阻止物体继续运动。当物体受到外力作用而振动时,会产生一种使外力衰减的反力,称为阻尼力(或减震力) 。换句话说,阻尼就是“减震”,作用就是用来防止物体来回抖动的,这个与上面聊的那个“抖” - bounciness 正好相反。阻尼越大,物体在运动过程中就越不抖,越小就抖的厉害。
阻尼的值必须大于零,而且阻尼可以与上面的刚度- stiffness 一块设置。两个阻尼相同,刚度越大抖的越厉害。
7、 mass - 质量
上面第一部分我们就聊质量了,物体的质量越大,惯性越大。同样一根弹簧,质量越大就抖的越厉害。在Spring动画中,stiffness(刚度)、damping(阻尼)和mass(质量)这三者是可以一块设置的。具体效果如下所示:
8、delay - 延迟
这个就比较好理解了,就是在滑块被皮条拉回去时的一个延迟,单位是毫秒。下方就是关于delay的演示。
上述就是RN中Spring中常用的配置参数了,可以根据不同的效果来具体设置不同的值。这些参数在不设置时也是有值的,下方是上述各个参数的默认值。
在本Demo中还用到了动画的一个知识点,那就是同步执行动画,一个是负责滑块的动画,一个负责皮条的动画。
下方是该部分Demo的全部代码,代码不多也就200行左右。
1 import { 2 Animated, 3 TouchableOpacity, 4 View, 5 Text, 6 StyleSheet, 7 GestureResponderEvent 8 } from 'react-native' 9 import { Component } from 'react' 10 import React from 'react' 11 12 type States = { 13 animationValue: Animated.Value 14 heightValue: Animated.Value 15 configValue: any 16 configLineValue: any 17 moveX: number 18 } 19 20 // BorderView 21 export default class SpringAnimationView extends Component<null, States> { 22 isStartAnimation = false 23 configKey = [ 24 'friction', // 摩擦力 25 'tension', // 张力 26 'bounciness', // 弹性 27 'speed', // 速度 28 'stiffness', // 刚度 29 'damping', // 阻尼 30 'mass', // 质量 31 'delay' // 延迟 32 ] 33 34 // 各个参数的默认值 35 defaultValue = { 36 friction: 7, 37 tension: 40, 38 bounciness: 8, 39 speed: 12, 40 stiffness: 100, 41 damping: 10, 42 mass: 1, 43 delay: 0 44 } 45 46 constructor (props) { 47 super(props) 48 this.state = { 49 animationValue: new Animated.Value(0), 50 heightValue: new Animated.Value(0), 51 configValue: { }, 52 configLineValue: { }, 53 moveX: 30 54 } 55 } 56 57 // 拖动抬起时执行的回调方法 58 touchUp = (evt) => { 59 this.isStartAnimation = true 60 this.setState({ moveX: evt.nativeEvent.pageX - 45 }) 61 this.startAnimation() 62 } 63 64 // 移动View执行的方法 65 moveView = (evt: GestureResponderEvent) => { 66 this.isStartAnimation = false 67 this.setState({ moveX: evt.nativeEvent.pageX - 45 }) 68 } 69 70 // 开始动画 71 startAnimation = () => { 72 this.state.animationValue.setValue(this.state.moveX) 73 this.state.heightValue.setValue(300 / this.state.moveX) 74 Animated.parallel([ 75 Animated.spring(this.state.animationValue, this.getConfigValue(30)), 76 Animated.spring(this.state.heightValue, this.getSecondConfigValue(10)) 77 ]).start() 78 } 79 80 // 获取动画执行的配置项 81 getConfigValue = (toValue: number) => { 82 let config = this.state.configValue 83 config.toValue = toValue 84 return config 85 } 86 87 // 获取动画执行的配置项 88 getSecondConfigValue = (toValue: number) => { 89 let config = this.state.configLineValue 90 config.toValue = toValue 91 return config 92 } 93 94 // 点击配置项所执行的事件 95 clickConfigPress = (key: string) => () => { 96 let config = this.state.configValue 97 if (config[key] === undefined) { 98 config[key] = this.defaultValue[key] 99 } else { 100 config[key] = undefined 101 } 102 this.setState({ configValue: config, configLineValue: { ...config } }) 103 } 104 105 add = (key: string) => () => { 106 this.defaultValue[key] += 5 107 this.updateStateValue(key) 108 } 109 110 desc = (key: string) => () => { 111 this.defaultValue[key] -= 5 112 if (this.defaultValue[key] < 0) { 113 this.defaultValue[key] = 0 114 } 115 this.updateStateValue(key) 116 } 117 118 updateStateValue = (key: string) => { 119 let config = this.state.configValue 120 if (config[key] !== undefined) { 121 config[key] = this.defaultValue[key] 122 } 123 this.setState({ configValue: config }) 124 } 125 126 addOrDescView = (title: string, presse: () => void) => { 127 return ( 128 <TouchableOpacity onPress={presse}> 129 <View style={style.textView}> 130 <Text style={ style.textStyle}> {title} </Text> 131 </View> 132 </TouchableOpacity> 133 ) 134 } 135 136 configView = (key: string, index: number) => { 137 const { 138 configValue 139 } = this.state 140 let backgroundColor = '#000' 141 if (configValue[key] !== undefined) { 142 backgroundColor = '#f00' 143 } 144 return ( 145 <View key={index} style={{ flex: 1, flexDirection: 'row', height: 60 }}> 146 <TouchableOpacity onPress={this.clickConfigPress(key)}> 147 <View style={[style.textView, { backgroundColor: backgroundColor }]}> 148 <Text style={ style.textStyle}> {key} </Text> 149 </View> 150 </TouchableOpacity> 151 152 {this.addOrDescView('-', this.desc(key))} 153 154 <View style={[style.textView, { backgroundColor: '#fff' }]}> 155 <Text style={ [style.textStyle, { color: '#000' }]}> {this.defaultValue[key]} </Text> 156 </View> 157 {this.addOrDescView('+', this.add(key))} 158 </View> 159 ) 160 } 161 162 animatedView = () => { 163 let left: any = this.state.moveX 164 if (this.isStartAnimation) { 165 left = this.state.animationValue 166 } 167 return ( 168 <Animated.View 169 style={{ 170 height: 50, 171 width: 50, 172 left: left, 173 backgroundColor: '#f00', 174 position: 'absolute', 175 borderRadius: 10 176 }}/> 177 ) 178 } 179 180 displayView = () => { 181 let width: any = this.state.moveX 182 let height: any = 300 / this.state.moveX 183 if (this.isStartAnimation) { 184 width = this.state.animationValue 185 height = this.state.heightValue 186 } 187 return ( 188 <View style={style.displayView} 189 onStartShouldSetResponder={() => { return true }} 190 onResponderRelease={this.touchUp} 191 onResponderMove={this.moveView}> 192 <Animated.View style={{ height: height, width: width, backgroundColor: '#fff' }}/> 193 {this.animatedView()} 194 </View> 195 ) 196 } 197 198 render () { 199 return ( 200 <View style={{ flex: 1 , margin: 10 }}> 201 {/*拖动的View*/} 202 {this.displayView()} 203 204 {/*操作配置项的View*/} 205 { 206 this.configKey.map((key, index) => { 207 return this.configView(key, index) 208 }) 209 } 210 </View> 211 ) 212 } 213 } 214 215 const style = StyleSheet.create({ 216 textView: { 217 justifyContent: 'center', 218 alignItems: 'center', 219 height: 50, 220 backgroundColor: '#000', 221 margin: 10, 222 padding: 10, 223 borderRadius: 10, 224 borderWidth: 1 225 }, 226 textStyle: { 227 textAlignVertical: 'center', 228 color: '#fff' 229 }, 230 displayView: { 231 width: '100%', 232 height: 50, 233 backgroundColor: '#ccc', 234 borderLeftColor: '#000', 235 borderLeftWidth: 3, 236 borderBottomColor: '#000', 237 borderBottomWidth: 1, 238 flexDirection: 'row', 239 alignItems: 'center' 240 } 241 })
本篇的“拉皮条”的动画就到这儿吧。