加载中...

Animation

实例代码 

  1. <template>
  2.   <div>
  3.     <wxc-panel title="Transform" type="primary">
  4.       <wxc-button value="Rotate" onclick="{{rotate}}" type="primary" size="middle"></wxc-button>
  5.       <wxc-button value="Scale" onclick="{{scale}}" type="primary" size="middle" style="margin-top:12px;"></wxc-button>
  6.       <wxc-button value="Translate" onclick="{{translate}}" type="primary" size="middle"
  7.                  style="margin-top:12px;"></wxc-button>
  8.       <wxc-button value="Transform" onclick="{{transform}}" type="success" size="middle"
  9.                  style="margin-top:12px;"></wxc-button>
  10.     </wxc-panel>
  11.  
  12.     <wxc-panel title="Others" type="primary">
  13.       <wxc-button value="BgColor" onclick="{{color}}" type="primary" size="middle"></wxc-button>
  14.       <wxc-button value="Opacity" onclick="{{opacity}}" type="primary" size="middle"
  15.                  style="margin-top:12px;"></wxc-button>
  16.       <wxc-button value="All" onclick="{{composite}}" type="success" size="middle" style="margin-top:12px;"></wxc-button>
  17.     </wxc-panel>
  18.  
  19.     <div id="block" class="block" style="transform-origin:{{transformOrigin}}">
  20.       <text class="block-txt">Anim</text>
  21.     </div>
  22.   </div>
  23. </template>
  24.  
  25. <script>
  26.   require('weex-components');
  27.   module.exports = {
  28.     data: {
  29.       transformOrigin: 'center center',
  30.       current_rotate: 0,
  31.       current_scale: 1,
  32.       current_color: '#FF0000',
  33.       current_opacity: 1,
  34.       current_translate: '',
  35.       current_transform: '',
  36.       isStop: true
  37.     },
  38.     methods: {
  39.       anim: function(styles, timingFunction, duration, callback) {
  40.         this.$call('animation', 'transition', this._ids.block.el.ref, {
  41.           styles: styles,
  42.           timingFunction: timingFunction,
  43.           duration: duration
  44.         }, callback);
  45.       },
  46.       rotate: function() {
  47.         var self = this;
  48.         self.current_rotate += 90;
  49.         self.anim({
  50.           transform: 'rotate(' + self.current_rotate + 'deg)'
  51.         }, 'ease-in-out', 500, function() {
  52.           if (self.current_rotate === 360) {
  53.             self.current_rotate = 0;
  54.           }
  55.           else {
  56.             self.rotate();
  57.           }
  58.         });
  59.       },
  60.       translate: function() {
  61.         this.current_translate = this.current_translate ? '' : 'translate(50%, 50%)';
  62.         this.anim({
  63.           transform: this.current_translate
  64.         }, 'ease-in', 500, function() {
  65.         });
  66.       },
  67.       scale: function() {
  68.         var self = this;
  69.         self.current_scale = self.current_scale === 2 ? .5 : 2
  70.         self.anim({
  71.           transform: 'scale(' + self.current_scale + ')'
  72.         }, 'linear', 500, function() {
  73.         });
  74.       },
  75.       transform: function() {
  76.         var self = this;
  77.         this.current_transform = this.current_transform ? '' : 'rotate(45deg) scale(1.5)';
  78.         this.anim({
  79.           transform: this.current_transform,
  80.           transformOrigin: 'left top'
  81.         }, 'ease-out', 500, function() {
  82.           if (self.current_transform !== '') {
  83.             self.anim({
  84.               transform: 'rotate(-90deg) scale(1.2)',
  85.               transformOrigin: 'left top'
  86.             }, 'ease-out', 500, function() {
  87.             })
  88.           }
  89.           else {
  90.  
  91.           }
  92.         });
  93.       },
  94.       composite: function() {
  95.         var self = this;
  96.         self.current_transform = self.current_transform ? '' : 'rotate(45deg) scale(1.5) translate(50%, 50%)';
  97.         self.current_color = self.current_color === '#F0AD4E' ? '#D9534F' : '#F0AD4E';
  98.         self.current_opacity = self.current_opacity === 1 ? 0.1 : 1;
  99.         this.anim({
  100.           transform: this.current_transform,
  101.           transformOrigin: 'left top',
  102.           backgroundColor: self.current_color,
  103.           opacity: self.current_opacity
  104.         }, 'ease-out', 1000, function() {
  105.         });
  106.       },
  107.       color: function() {
  108.         var self = this;
  109.         self.current_color = self.current_color === '#F0AD4E' ? '#D9534F' : '#F0AD4E';
  110.         self.anim({
  111.           backgroundColor: self.current_color
  112.         }, 'linear', 500, function() {
  113.         });
  114.       },
  115.       opacity: function() {
  116.         var self = this;
  117.         self.current_opacity = self.current_opacity === 1 ? 0.1 : 1;
  118.         self.anim({
  119.           opacity: self.current_opacity
  120.         }, 'linear', 500, function() {
  121.         });
  122.       }
  123.     }
  124.   };
  125. </script>
  126.  
  127. <style>
  128.   .block {
  129.     position: absolute;
  130.     width: 250px;
  131.     height: 250px;
  132.     top: 300px;
  133.     left: 400px;
  134.     background-color: #F0AD4E;
  135.     align-items: center;
  136.     justify-content: center;
  137.   }
  138.  
  139.   .block-txt {
  140.     color: #FFFFFF;
  141.     font-size: 70px;
  142.   }
  143. </style>
还没有评论.