想问一下rotateY转动方向的问题

来源：7-11 书城首页（卡片翻转动画实现）

mylovef

2020-01-08

这里翻书效果那个动画的右侧半圆，我觉得是从水平面（屏幕的平面）转动到垂直屏幕向外，这样一个效果，对吗？也就是说转动的方向是从屏幕的平面，朝着人的眼睛在向外转动。
那这样的话从Y轴的正方向看，感觉是一个从0度转到-90度的样子，因为Y轴方向看转动是逆时针了。
有点不太明白为啥老师是从0度转到90度，但老师的作品效果是对的，想问一下我这里理解有什么错误，谢谢

写回答

2回答

树佬

2022-05-13

【拙见】个人感觉老师可能还没说清楚，”从右侧转向屏幕方向“屏幕方向到底指向内还是向外，后面”180-360就是向屏幕后转“所以个人猜测老师的意思是指屏幕向外，但是个人感觉是错误的，相反我能够理解题主的意思，而且顺着题主的思路我做了调整（后面说到）。为方便表述，你可以理解为左手准则，拇指指向就是方向轴的正向，四指方向就是该轴的正向。

【分析、思路】所以在这里老师的思路是先将back卡片位置向屏幕向外方向（即正向，后面称正向，反之称反向）旋转180deg 跟front卡片重叠，然后设置定时器每次 front卡片向正向旋转10deg 同时 back卡片向反向旋转，开始是同一位置，但旋转方向不同，所以front back两个卡片在旋转过程并不是时时紧贴在一起（题主思路应该是要两个卡片紧贴一起旋转，所以旋转方向相同）

【解决方法】故我试了一下，按照题主思路，想紧贴一起去旋转其实可以将front卡片的每次旋转度数由“frontFladCard.rotateDegree = 10“ 变成 -10 （还没完呢），还要在后面改判断条件”frontFladCard.rotateDegree === 180“ 为-180，这样一来效果是一样的（亲测）！