| <template> |
| <div> |
| <wxc-panel title="Transform" type="primary"> |
| <wxc-button value="Rotate" onclick="{{rotate}}" type="primary" size="middle"></wxc-button> |
| <wxc-button value="Scale" onclick="{{scale}}" type="primary" size="middle" style="margin-top:12px;"></wxc-button> |
| <wxc-button value="Translate" onclick="{{translate}}" type="primary" size="middle" |
| style="margin-top:12px;"></wxc-button> |
| <wxc-button value="Transform" onclick="{{transform}}" type="success" size="middle" |
| style="margin-top:12px;"></wxc-button> |
| </wxc-panel> |
| |
| <wxc-panel title="Others" type="primary"> |
| <wxc-button value="BgColor" onclick="{{color}}" type="primary" size="middle"></wxc-button> |
| <wxc-button value="Opacity" onclick="{{opacity}}" type="primary" size="middle" |
| style="margin-top:12px;"></wxc-button> |
| <wxc-button value="All" onclick="{{composite}}" type="success" size="middle" style="margin-top:12px;"></wxc-button> |
| </wxc-panel> |
| |
| <div id="block" class="block" style="transform-origin:{{transformOrigin}}"> |
| <text class="block-txt">Anim</text> |
| </div> |
| </div> |
| </template> |
| |
| <script> |
| require('weex-components'); |
| module.exports = { |
| data: { |
| transformOrigin: 'center center', |
| current_rotate: 0, |
| current_scale: 1, |
| current_color: '#FF0000', |
| current_opacity: 1, |
| current_translate: '', |
| current_transform: '', |
| isStop: true |
| }, |
| methods: { |
| anim: function(styles, timingFunction, duration, callback) { |
| this.$call('animation', 'transition', this._ids.block.el.ref, { |
| styles: styles, |
| timingFunction: timingFunction, |
| duration: duration |
| }, callback); |
| }, |
| rotate: function() { |
| var self = this; |
| self.current_rotate += 90; |
| self.anim({ |
| transform: 'rotate(' + self.current_rotate + 'deg)' |
| }, 'ease-in-out', 500, function() { |
| if (self.current_rotate === 360) { |
| self.current_rotate = 0; |
| } |
| else { |
| self.rotate(); |
| } |
| }); |
| }, |
| translate: function() { |
| this.current_translate = this.current_translate ? '' : 'translate(50%, 50%)'; |
| this.anim({ |
| transform: this.current_translate |
| }, 'ease-in', 500, function() { |
| }); |
| }, |
| scale: function() { |
| var self = this; |
| self.current_scale = self.current_scale === 2 ? .5 : 2 |
| self.anim({ |
| transform: 'scale(' + self.current_scale + ')' |
| }, 'linear', 500, function() { |
| }); |
| }, |
| transform: function() { |
| var self = this; |
| this.current_transform = this.current_transform ? '' : 'rotate(45deg) scale(1.5)'; |
| this.anim({ |
| transform: this.current_transform, |
| transformOrigin: 'left top' |
| }, 'ease-out', 500, function() { |
| if (self.current_transform !== '') { |
| self.anim({ |
| transform: 'rotate(-90deg) scale(1.2)', |
| transformOrigin: 'left top' |
| }, 'ease-out', 500, function() { |
| }) |
| } |
| else { |
| |
| } |
| }); |
| }, |
| composite: function() { |
| var self = this; |
| self.current_transform = self.current_transform ? '' : 'rotate(45deg) scale(1.5) translate(50%, 50%)'; |
| self.current_color = self.current_color === '#F0AD4E' ? '#D9534F' : '#F0AD4E'; |
| self.current_opacity = self.current_opacity === 1 ? 0.1 : 1; |
| this.anim({ |
| transform: this.current_transform, |
| transformOrigin: 'left top', |
| backgroundColor: self.current_color, |
| opacity: self.current_opacity |
| }, 'ease-out', 1000, function() { |
| }); |
| }, |
| color: function() { |
| var self = this; |
| self.current_color = self.current_color === '#F0AD4E' ? '#D9534F' : '#F0AD4E'; |
| self.anim({ |
| backgroundColor: self.current_color |
| }, 'linear', 500, function() { |
| }); |
| }, |
| opacity: function() { |
| var self = this; |
| self.current_opacity = self.current_opacity === 1 ? 0.1 : 1; |
| self.anim({ |
| opacity: self.current_opacity |
| }, 'linear', 500, function() { |
| }); |
| } |
| } |
| }; |
| </script> |
| |
| <style> |
| .block { |
| position: absolute; |
| width: 250px; |
| height: 250px; |
| top: 300px; |
| left: 400px; |
| background-color: #F0AD4E; |
| align-items: center; |
| justify-content: center; |
| } |
| |
| .block-txt { |
| color: #FFFFFF; |
| font-size: 70px; |
| } |
| </style> |