奔三路 - 你30岁前的学习路!

奔三路学习网

当前位置: 主页 > 大前端知识 > React >

React-Native的动画Animated菜鸟篇

时间:2019-04-24 14:03来源:未知 作者:admin
简单三步实现多端的透明渐变动画
简单三步实现多端的透明渐变动画

第一步:导入Animated
import {Animated} from 'react-native'

第二步:在state设置动画初始值

state = {
   opacity:new Animated.Value(0)
}


第三步:在挂载的生命周期里开启动画

完整代码

import React, {Component} from 'react';

import {Animated,View,Text} from 'react-native'

export default class Donghua extends Component{
constructor(props){
super(props)
this.state = {
opacity:new Animated.Value(0)
}
}

componentDidMount(){
Animated.timing(this.state.opacity,{toValue:1,duration:1000})
.start()
}

render(){
return (
<View>
<Animated.Text style={{
opacity:this.state.opacity
}}>
慢慢会显示出来的文字
</Animated.Text>
</View>
 
)
}
}
(责任编辑:admin)
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
  • 上一篇:没有了
  • 下一篇:没有了
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片

奔三路小程序已改版