React Native 旋转,偏移,缩放动画demo

先看效果

QQ20170629-102158.gif
   componentDidMount() {
        Animated.spring(this.state.scaleAnimate, {
            toValue: 1,
            velocity: 6,//初始速度
            friction: 3,//摩擦力值
            tension: -6,//弹跳的速度值
            duration: 1500,//
        }).start();

    }
  style={[styles.alertStyle,
                            {
                                transform: [
                                    {   //缩放效果
                                        scale: this.state.scaleAnimate.interpolate({
                                            inputRange: [0, 0.5, 1],
                                            outputRange: [0.8, 1.2, 1],
                                        })
                                    },
                                    {   //偏移效果
                                        translateY:this.state.scaleAnimate.interpolate({
                                            inputRange:[0,1],
                                            outputRange:[400,0]
                                        })
                                    },{ //旋转效果
                                        rotateX:this.state.scaleAnimate.interpolate({
                                            inputRange:[0,0.5,1],
                                            outputRange:['0deg','180deg','0deg']
                                        })
                                    }

                                ]
                            }
                        ]}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

友情链接更多精彩内容