crn-cli
Version:
The Ctrip React Native CLI Tools
1 lines • 4.27 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]),l=r(d[3]),s=r(d[4]),c=r(d[5]),p=r(d[6]),u=p.Animated,f=p.StyleSheet,h=p.Text,b=p.View,y=(function(p){function f(){var n,s;t(this,f);for(var c=arguments.length,p=new Array(c),h=0;h<c;h++)p[h]=arguments[h];return(s=o(this,(n=l(f)).call.apply(n,[this].concat(p)))).state={theta:new u.Value(45)},s._animate=function(){s.state.theta.setValue(0),u.timing(s.state.theta,{toValue:360,duration:5e3}).start(s._animate)},s}return s(f,p),n(f,[{key:"componentDidMount",value:function(){this._animate()}},{key:"render",value:function(){return c.createElement(b,{style:x.flipCardContainer},c.createElement(u.View,{style:[x.flipCard,{transform:[{perspective:850},{rotateX:this.state.theta.interpolate({inputRange:[0,180],outputRange:['0deg','180deg']})}]}]},c.createElement(h,{style:x.flipText},"This text is flipping great.")),c.createElement(u.View,{style:[x.flipCard,x.flipCard1,{transform:[{perspective:850},{rotateX:this.state.theta.interpolate({inputRange:[0,180],outputRange:['180deg','360deg']})}]}]},c.createElement(h,{style:x.flipText},"On the flip side...")))}}]),f})(c.Component),x=f.create({container:{height:500},box1:{left:0,backgroundColor:'green',height:50,position:'absolute',top:0,transform:[{translateX:100},{translateY:50},{rotate:'30deg'},{scaleX:2},{scaleY:2}],width:50},box2:{left:0,backgroundColor:'purple',height:50,position:'absolute',top:0,transform:[{scaleX:2},{scaleY:2},{translateX:100},{translateY:50},{rotate:'30deg'}],width:50},box3step1:{left:0,backgroundColor:'lightpink',height:50,position:'absolute',top:0,transform:[{rotate:'30deg'}],width:50},box3step2:{left:0,backgroundColor:'hotpink',height:50,opacity:.5,position:'absolute',top:0,transform:[{rotate:'30deg'},{scaleX:2},{scaleY:2}],width:50},box3step3:{left:0,backgroundColor:'deeppink',height:50,opacity:.5,position:'absolute',top:0,transform:[{rotate:'30deg'},{scaleX:2},{scaleY:2},{translateX:100},{translateY:50}],width:50},box4:{left:0,backgroundColor:'darkorange',height:50,position:'absolute',top:0,transform:[{translate:[200,350]},{scale:2.5},{rotate:'-0.2rad'}],width:100},box5:{backgroundColor:'maroon',height:50,position:'absolute',right:0,top:0,width:50},box5Transform:{transform:[{translate:[-50,35]},{rotate:'50deg'},{scale:2}]},flipCardContainer:{marginVertical:40,flex:1,alignSelf:'center'},flipCard:{width:200,height:200,alignItems:'center',justifyContent:'center',backgroundColor:'blue',backfaceVisibility:'hidden'},flipCard1:{position:'absolute',top:0,backgroundColor:'red'},flipText:{width:90,fontSize:20,color:'white',fontWeight:'bold'}});e.title='Transforms',e.description='View transforms',e.examples=[{title:'Perspective, Rotate, Animation',description:'perspective: 850, rotateX: Animated.timing(0 -> 360)',render:function(){return c.createElement(y,null)}},{title:'Translate, Rotate, Scale',description:"translateX: 100, translateY: 50, rotate: '30deg', scaleX: 2, scaleY: 2",render:function(){return c.createElement(b,{style:x.container},c.createElement(b,{style:x.box1}))}},{title:'Scale, Translate, Rotate, ',description:"scaleX: 2, scaleY: 2, translateX: 100, translateY: 50, rotate: '30deg'",render:function(){return c.createElement(b,{style:x.container},c.createElement(b,{style:x.box2}))}},{title:'Rotate',description:"rotate: '30deg'",render:function(){return c.createElement(b,{style:x.container},c.createElement(b,{style:x.box3step1}))}},{title:'Rotate, Scale',description:"rotate: '30deg', scaleX: 2, scaleY: 2",render:function(){return c.createElement(b,{style:x.container},c.createElement(b,{style:x.box3step2}))}},{title:'Rotate, Scale, Translate ',description:"rotate: '30deg', scaleX: 2, scaleY: 2, translateX: 100, translateY: 50",render:function(){return c.createElement(b,{style:x.container},c.createElement(b,{style:x.box3step3}))}},{title:'Translate, Scale, Rotate',description:"translate: [200, 350], scale: 2.5, rotate: '-0.2rad'",render:function(){return c.createElement(b,{style:x.container},c.createElement(b,{style:x.box4}))}},{title:'Translate, Rotate, Scale',description:"translate: [-50, 35], rotate: '50deg', scale: 2",render:function(){return c.createElement(b,{style:x.container},c.createElement(b,{style:[x.box5,x.box5Transform]}))}}]},666792,[3,4,5,8,9,11,15]);