Sports effect
In the previous three.js motion effect production, you can produce animation effects by moving the camera and moving objects.
In actual development, moving the camera and moving the object is to move the position of the camera or object in the rendering loop. If the animation is a little more complicated, it will be more troublesome to implement in this way.
At this time, I have to learn new things again, such as-animation engine...
(Tucao: I gave up CSS animation animation due to IE browser compatibility from work needs, and then used canvas to solve the problem. Then I dealt with this Interested, I started to learn, after I learned canvas, I found three.js, and then I started to learn that it’s better to use an animation engine for good results. I found Tween.js, and I felt that TweenMax was more fluent, and then...only If I can learn it, I will learn it all (◔‸◔))
TweenMax official website: https://www.tweenmax.com.cn/
About the introduction and use of TweenMax: https://www.tweenmax.com.cn/start/init/
Instructions
1. Load the TweenMax file
Like all front-end plugins, the core tool TweenLite.min.js or TweenMax.min.js must be loaded.
There are other corresponding plugins for TweenMax, as follows. The corresponding function can be used after the corresponding plug-in is loaded.
<script src="js/greensock-js/TweenLite.min.js"> </script> -- 核心工具，可初始化TweenLite对象
<script src="js/greensock-js/plugins/CSSPlugin.min.js"> </script> -- 基础插件，用于制作CSS动画2D，3D动画
<script src="js/greensock-js/plugins/BezierPlugin.min.js"> </script> -- 基础插件，用于制作贝塞尔曲线
<script src="js/greensock-js/TimelineLite.min.js"> </script> -- 核心工具，创建时间轴管理动画
<script src="js/greensock-js/easing/EasePack.min.js"> </script> -- 拓展的时间曲线，例如bounce
It is recommended to use TweenMax, a full-featured js file in the development, which includes most of the core functions of the GreenSock animation platform.
The loading above using TweenMax can be reduced to:
<script src="js/greensock-js/TweenMax.min.js"> </script>
2. Make animation
Three elements of animation:
- Animation target
- Animation duration
- Changing attributes
Example of use with Three:
Mobile in TweenMax uses onUpdate to change
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TweenMax学习</title>
<script src="../js/three.js" type="text/javascript" charset="utf-8"></script>
<script src="Js/TweenMax.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="app"></div>
<script type="text/javascript">
var scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(105, window.innerWidth / window.innerHeight, 1, 1000);
render = new THREE.WebGLRenderer({
antialias: true
});
render.setPixelRatio(window.devicePixelRatio);
render.setSize(window.innerWidth, window.innerHeight)
var app = document.getElementById("app");
app.appendChild(render.domElement);
/*****************************************************************/
var geometry = new THREE.CylinderGeometry(10, 10, 20, 15);
var material3 = new THREE.MeshBasicMaterial({
color: 0xffff00,
});
var meshs = new THREE.Mesh(geometry, material3);
// 创建物体的边框线
var geoEdges = new THREE.EdgesGeometry(geometry, 1);
var edgesMtl = new THREE.LineBasicMaterial({
color: 0xff0000});
var geoLine = new THREE.LineSegments(geoEdges, edgesMtl);
meshs.add(geoLine);
scene.add(meshs);
camera.position.z = 40;
camera.position.y = 20;
camera.position.x = 0;
render.render(scene, camera);
/*****************************************************************/
// 产生动效
var TweenMax = new TimelineMax(); // 必须创建对象
// 参数： 指定的目标obj
TweenMax.to(meshs.position, 3, {
onUpdate:function(){
meshs.position.y += 0.3;
if(meshs.position.y > 25) {
meshs.position.z -= 0.3;
}
},
});
// 重复一次上面步骤，因为只用了onUpdate，所以相当于将时间延长3秒
// TweenMax.repeat(1);
function animate(){
render.render(scene, camera);
window.requestAnimationFrame(animate);
}
animate();
</script>
</body>
</html>
effect:
