crn-cli
Version:
The Ctrip React Native CLI Tools
1 lines • 4.22 kB
JavaScript
__d(function(g,r,i,a,m,e,d){'use strict';var t=r(d[0]),n=r(d[1]),o=r(d[2]),s=r(d[3]),u=r(d[4]),l=r(d[5]),c=r(d[6]),p=c.Animated,h=c.Easing,f=c.StyleSheet,E=c.Text,w=c.View,y=r(d[7]),v=f.create({content:{backgroundColor:'deepskyblue',borderWidth:1,borderColor:'dodgerblue',padding:20,margin:20,borderRadius:10,alignItems:'center'},rotatingImage:{width:70,height:70}});e.framework='React',e.title='Animated - Examples',e.description="Animated provides a powerful and easy-to-use API for building modern, interactive user experiences.",e.examples=[{title:'FadeInView',description:"Uses a simple timing animation to bring opacity from 0 to 1 when the component mounts.",render:function(){var c=(function(c){function h(n){var u;return t(this,h),(u=o(this,s(h).call(this,n))).state={fadeAnim:new p.Value(0)},u}return u(h,c),n(h,[{key:"componentDidMount",value:function(){p.timing(this.state.fadeAnim,{toValue:1,duration:2e3}).start()}},{key:"render",value:function(){return l.createElement(p.View,{style:{opacity:this.state.fadeAnim}},this.props.children)}}]),h})(l.Component),h=(function(p){function h(n){var u;return t(this,h),(u=o(this,s(h).call(this,n))).state={show:!0},u}return u(h,p),n(h,[{key:"render",value:function(){var t=this;return l.createElement(w,null,l.createElement(y,{onPress:function(){t.setState(function(t){return{show:!t.show}})}},"Press to ",this.state.show?'Hide':'Show'),this.state.show&&l.createElement(c,null,l.createElement(w,{style:v.content},l.createElement(E,null,"FadeInView"))))}}]),h})(l.Component);return l.createElement(h,null)}},{title:'Transform Bounce',description:"One `Animated.Value` is driven by a spring with custom constants and mapped to an ordered set of transforms. Each transform has an interpolation to convert the value into the right range and units.",render:function(){var t=this;return this.anim=this.anim||new p.Value(0),l.createElement(w,null,l.createElement(y,{onPress:function(){p.spring(t.anim,{toValue:0,velocity:3,tension:-10,friction:1}).start()}},"Press to Fling it!"),l.createElement(p.View,{style:[v.content,{transform:[{scale:this.anim.interpolate({inputRange:[0,1],outputRange:[1,4]})},{translateX:this.anim.interpolate({inputRange:[0,1],outputRange:[0,500]})},{rotate:this.anim.interpolate({inputRange:[0,1],outputRange:['0deg','360deg']})}]}]},l.createElement(E,null,"Transforms!")))}},{title:'Composite Animations with Easing',description:"Sequence, parallel, delay, and stagger with different easing functions.",render:function(){var t=this;return this.anims=this.anims||[1,2,3].map(function(){return new p.Value(0)}),l.createElement(w,null,l.createElement(y,{onPress:function(){var n=p.timing;p.sequence([n(t.anims[0],{toValue:200,easing:h.linear}),p.delay(400),n(t.anims[0],{toValue:0,easing:h.elastic(2)}),p.delay(400),p.stagger(200,t.anims.map(function(t){return n(t,{toValue:200})}).concat(t.anims.map(function(t){return n(t,{toValue:0})}))),p.delay(400),p.parallel([h.inOut(h.quad),h.back(1.5),h.ease].map(function(o,s){return n(t.anims[s],{toValue:320,easing:o,duration:3e3})})),p.delay(400),p.stagger(200,t.anims.map(function(t){return n(t,{toValue:0,easing:h.bounce,duration:2e3})}))]).start()}},"Press to Animate"),['Composite','Easing','Animations!'].map(function(n,o){return l.createElement(p.View,{key:n,style:[v.content,{left:t.anims[o]}]},l.createElement(E,null,n))}))}},{title:'Rotating Images',description:'Simple Animated.Image rotation.',render:function(){var t=this;return this.anim=this.anim||new p.Value(0),l.createElement(w,null,l.createElement(y,{onPress:function(){p.spring(t.anim,{toValue:0,velocity:3,tension:-10,friction:1}).start()}},"Press to Spin it!"),l.createElement(p.Image,{source:r(d[8]),style:[v.rotatingImage,{transform:[{scale:this.anim.interpolate({inputRange:[0,1],outputRange:[1,10]})},{translateX:this.anim.interpolate({inputRange:[0,1],outputRange:[0,100]})},{rotate:this.anim.interpolate({inputRange:[0,1],outputRange:['0deg','360deg']})}]}]}))}},{title:'Continuous Interactions',description:"Gesture events, chaining, 2D values, interrupting and transitioning animations, etc.",render:function(){return l.createElement(E,null,"Checkout the Gratuitous Animation App!")}}]},666752,[3,4,5,8,9,11,15,666753,666710]);