1. transition ,所在元素块样式变动时启动,可用于样式变动时 产生过渡动画效果
| transition-property | 规定设置过渡效果的 CSS 属性的名称。 |
| transition-duration | 规定完成过渡效果需要多少秒或毫秒。 |
| transition-timing-function | 规定速度效果的速度曲线。 |
| transition-delay | 定义过渡效果何时开始。 |
2. tranform :用于平移,旋转,缩放,透视
语法
animation-name 规定需要绑定到选择器的 keyframe 名称。
animation-duration规定完成动画所花费的时间,以秒或毫秒计。
animation-timing-function规定动画的速度曲线。
animation-delay规定在动画开始之前的延迟。
animation-iteration-count规定动画应该播放的次数。
animation-direction规定是否应该轮流反向播放动画。
animationname 必需。定义动画的名称。
keyframes-selector 必需。动画时长的百分比。值:0-100%,from(与 0% 相同),to(与 100% 相同)
css-styles 必需。一个或多个合法的 CSS 样式属性。
4.@media :可以根据屏幕大小响应式改变样式
接下来利用transition和transfrom实现一个简单的翻牌效果,先看效果
1.准备素材(正、背面牌各一张)
2.cocos creator创建一个Sprite(width:200,height:120),SpriteFrame默认是背面牌
3.创建一个animate动画,名为fanpai:
(1)图中poker2为牌的Sprite,选中后,点击【add property】添加width;
(2)图中时间轴,分别在0:00、0:10、0:20设置Sprite的width为200、40、200,也就是说在动画一开始到0.1秒width缩小到40,然后又增长到200,这样就多了一个视觉上翻牌的感觉。
4.接下来是换牌,正面换为背面牌
过程:0秒的时候是背面牌,0.1秒的时候width缩小到40,此时牌为背面牌,0.2秒的时候width增加到200,此时牌为正面牌,因此视觉上实现了翻转的感觉。实际效果可以根据Sprite的大小自己调。
5.如果是多张牌要依次翻开,可以设置好schedule的间隔时间,依次执行各Sprite的动画。
此方法也是简单实现视觉上自动翻牌的效果,欢迎指正和讨论。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)