用 Animation 实现匀速旋转

年初参加 GGJ 的时候,我曾想偷懒用 Animation 实现物体的匀速旋转。思路很简单,只需要0度和360(或-360)度两个关键帧,然后将动画设为循环播放。当时以为这样事情就成了。谁知做出来的效果是下面这样,物体转完一圈后会停一下:


我知道问题就在动画曲线上:


只要把曲线弄成一条直线就行。

但是当时折腾了一会儿也没调出一条漂亮的直线,因此还是改用代码来实现匀速旋转。今天发现其实根本不用手调,只要右键单击,把起始关键帧的 Right Tangent 和结尾关键帧的 Left Tangent 改为 Linear (线性)就可以了:


完美:


其实以前也知道 Free、Linear 和 Constant 这几个选项,但从来没用上也没真正理解它们的用处。如今才知道是怎么回事,至少理解 Linear 了。

Unity 版本:2017.3.1f1

本文在我的独立博客上的地址:http://zxtechart.com/2018/04/12/constant-speed-rotation-with-animation/

  • 14
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
css 包含了许多特效,其中之一就是匀速旋转图形。在使用css实现匀速旋转图形时,可以使用css3的transform属性来实现。通过设置旋转的度数和动画的时间来实现匀速旋转效果。 首先,需要创建一个父元素,设置其宽度、高度和位置等属性。然后,通过transform属性设置父元素的旋转角度,可以使用rotateX或rotateY来设置旋转的轴向和角度。同时,通过animation属性设置动画效果,包括持续时间和动画方式等。 接下来,创建子元素,并设置背景颜色等样式。通过transform属性设置子元素的位移和旋转角度,可以使用translateZ来设置子元素的位移距离,通过rotateY来设置子元素的水平旋转角度。 通过以上步骤,就可以实现一个css匀速旋转图形。具体实现代码如下: ```css .box { width: 300px; height: 300px; margin: 150px auto; position: relative; transform-style: preserve-3d; /* 形成3d效果 */ transform: rotateY(28deg) rotateX(11deg); /* y轴旋转28deg ,x轴旋转11deg 方便观察*/ animation: sPinxz 6s linear infinite; /* 动画效果 匀速 重复 */ } .box2 { background: green; transform: translateZ(-150px) rotateY(180deg); /* 向后150px 旋转180度*/ } ``` 通过以上代码,可以实现一个匀速旋转的图形。其中,`.box`是父元素,`.box2`是子元素,通过设置不同的样式和旋转角度,可以实现不同的匀速旋转效果。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [CSS3 3d旋转图片立方体特效代码](https://blog.csdn.net/chenqx182/article/details/104736598)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值