HenCoderPractice

KO | EN

gitlite — search

#javascript #hacktoberfest #typescript #llm #go #deep-learning #docker #java #awesome #cli #kubernetes #vue #awesome-list #pytorch

HenCoderPractice

(★ 224)

HenCoder「仿写酷界面」活动 - Flipboard 红板报的翻页效果

HenCoderPractice 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# HenCoderPractice

HenCoder 三维旋转动效的实现

![demo gif](https://github.com/sunnyxibei/HenCoderPractice/blob/master/jpg/flipboard.gif?raw=true)

>这是凯哥在 HenCoder 讲解几何变换章节提到的一个动画栗子，很炫酷，极大地激发了偶的好奇心。正好这个周末手头没啥事儿，研究了一下实现。

* 首先，拆解动效，把gif图片放到手机上，咔咔咔不停地截屏，截出一帧一帧的图片
* 然后，分析这些图片，可以发现，动效分为三部分：
  * 开始动画，一个Y轴旋转45度动效，看过hencoder教程的童鞋应该很轻松实现
  * 中间动画，比较复杂，后面着重分解
  * 结束动画，一个绕X轴旋转45度动效，看过hencoder教程的童鞋应该很轻松实现

重点分析中间动画，一帧一帧观察，基本判断是，先旋转canvas坐标系，再裁切图形，然后使用camera3D旋转，保存camera效果 `camera.applyToCanvas(canvas);`，然后再把canvas坐标系旋转回来。本来想画个图解释一下，奈何时间有限，你先仔细体会一下吧......

实现中间动画，原理上面已经说了
```
		canvas.save();
	    camera.save();
	    canvas.translate(centerX, centerY);
	    canvas.rotate(-degreeZ);
	    camera.rotateY(degreeY);
	    camera.applyToCanvas(canvas);
	    //计算裁切参数时清注意，此时的canvas的坐标系已经移动
	    canvas.clipRect(0, -centerY, centerX, centerY);
	    canvas.rotate(degreeZ);
	    canvas.translate(-centerX, -centerY);
	    camera.restore();
	    canvas.drawBitmap(bitmap, x, y, paint);
	    canvas.restore();
```
划重点，需要注意：

1、Canvas的几何变换，顺序是倒序
	2、clipRect执行时，canvas的坐标系已经被我们移动了，计算参数时要以移动后的坐标系计算
	3、循环播放动效时，在执行动效前，要重置几个动效相关的参数值
	4、第三个动效执行时，我们的canvas已经旋转了270度，所以此时的旋转<h2>实际上</h2>是绕Y轴旋转，而且旋转角度的正负也是反着的，你看下代码，再仔细体会一下

HenCoderPractice

HenCoderPractice 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

HenCoderPractice

HenCoderPractice 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README