Application Practice of HTML5+CSS3 Advanced Animation

We probably all know that CSS can be used to rotate, distort, zoom in and out, and translate. . . And almost all handy to use.
But for now, the "advanced" animation with 3D effects seems to be more popular, and we do need it.

---

No, the author added a 3D effect to the " flip animation " in the project two days ago , which looks cool:

The 3D box model used in this animation is the most commonly used one of the 3D models now-but let's analyze two of them first:

1. First, to achieve this, we looked in from the outside: the part where as a text box, then around two horizontal lines are not part of the box fishes, then it is natural to think of - ::afterand ::beforepseudo-elements;
2. Secondly, the two characters are on two div, then we need to have a can that came overflow: hiddenin the box - the box can not be added to the above, because after and before does not belong div!
3. The last is the flip effect of the two elements: what we need to know is that for performance considerations, we'd better flip the entire box instead of attaching animation to the two text divs

In fact, the meaning of the attributes in the transform animation is more "how much to transition" rather than "where to transition"!

Then, this hierarchical relationship is very clear:

<!--伪元素装饰盒子-->
<div class="pic_border">
    <!--overflow-hidden盒子-->
    <div class="pic_box">
        <!--transition过渡盒子-->
        <div class="pic_item">
            <div class="pic_text">music</div>
            <div class="pic_back">此时此刻，非我莫属</div>
        </div>
    </div>
</div>

According to the above, we can easily add the corresponding CSS for it:

.pic_border{
    
    
    position: relative;
}
.pic_border::before{
    
    
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 43vw;
    height: 1px;
    background-color: red;
}
.pic_border::after{
    
    
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    width: 43vw;
    height: 1px;
    background-color: red;
}
@media screen and (max-width: 1100px) {
    
    
    .pic_border::before,.pic_border::after{
    
    
        width: 20vw;
    }
}
.pic_box{
    
    
    display: inline-block;
    height: 70px;
    margin-left: calc(50% - 70px);
    overflow: hidden;
    perspective: 2000px;
    cursor: pointer;
    user-select: none;
}
.pic_item{
    
    
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: all .7s ease;
}
.pic_text,.pic_back{
    
    
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.pic_text{
    
    
    transform: rotateX(0deg) translateZ(-21.9px);
}
.pic_back{
    
    
    transform: rotateX(90deg) translateZ(-15px);
}
.pic_box:hover .pic_item{
    
    
    transform: rotateX(-90deg);
}
.pic_box:active .pic_item{
    
    
    transform: rotateX(-90deg);
}

It should be noted that: 3D effects must involve the Z axis! Otherwise it will look very "awkward"

---

With simple scrolling up and down, we can also implement " follow the mouse up and down, left and right " animation, which is the so-called "where the mouse enters the box, the box will flip in which direction"-there are two ways to achieve:

1. Add i or span tags in four directions to the outermost box to determine where the mouse enters from, and the JS control box will do the corresponding rotateX/Y;
2. With the help of math library and "matrix" :

<div class="block" id="block">
    <div class="face front"></div>
    <div class="face back"></div>
    <div class="face up"></div>
    <div class="face down"></div>
    <div class="face left"></div>
    <div class="face right"></div>
</div>

.block {
    
    
    position: absolute;
    transform-style: preserve-3d;
    width: 100px;
    height: 100px;
    transform-origin: 50px 50px;
}
.front {
    
    
    background: fuchsia;
}

.back {
    
    
    transform: translate3d(0, 0, 100px) rotateY(180deg);
    background: red;
}
.left {
    
    
    transform-origin: 100% 50% 0px;
    transform: rotateY(90deg);
    background: aqua;
}
.right {
    
    
    transform-origin: 0% 50% 0px;
    transform: rotateY(-90deg);
    background: blueviolet;
}
.up {
    
    
    transform-origin: 50% 0% 0px;
    transform: rotateX(90deg);
    background: darkorange;
}
.down {
    
    
    transform-origin: 50% 100% 0px;
    transform: rotateX(-90deg);
    background: darkviolet;
}

In order to facilitate observation, we rotate the cube grid:
mouse sliding is divided into left, right, up and down sliding, and each sliding corresponds to the rotation of the grid in one direction.

• From right to left: Rotate around Y axis by angle θ
• From left to right: Rotate around Y axis by -θ angle
• From top to bottom: Rotate the angle θ around the X axis
• From bottom to top: Rotate around X axis -θ degrees

Of course, the rotation needs to have a reference point, the default box center. We can use the library function to convert the generated matrix into the matrix3d ​​property value of transform in CSS.

var currentQ = {
    
    x:0, y:0, z:0, w:1};
var lastQ = {
    
    x:0, y:0, z:0, w:1};
var currentMatrix = matrix.identity();
var l = Math.sqrt(dx * dx + dy * dy);
if(l <= 0) return;
var x = dx / l, y = dy / l;
var axis = {
    
    x: x, y: y, z: 0};
var q = matrix.fromAxisAndAngle(axis, l);
currentQ = matrix.multiplyQuaternions(q, lastQ);
currentMatrix = matrix.makeRotationFromQuaternion(currentQ);

We have calculated the current rotation matrix currentMatrix through the above method. Next, we use the matrix described above to transform it into a function corresponding to CSS to generate the corresponding transform attribute:

// 将矩阵转化为transform matrix 属性值。
function matrix2css(m){
    
    
    var style = 'matrix(';
    if(m.length == 16){
    
    
        style = 'matrix3d('
    }
    for(let i =0; i< m.length; i++){
    
    
        style += m[i];
        if(i !== m.length - 1){
    
    
            style += ','
        }else{
    
    
            style +=')'
        }
    }
    return style;
}

var style = matrix2css(currentMatrix);

Finally, apply the generated style to the cube grid:

document.querySelector('#block').style.transform = style;

In this way, a wonderful animation box is realized!

---

Application of frame animation in canvas

In addition to CSS-transform and animation in the project, the canvas+CSS animation method has also been supported by many people! And the best way to realize animation in canvas is not off-screen technology, not canvas animation library, but frame animation!

We usually control the position of the display area on a picture through requestAnimFrame to achieve "pseudo animation"!

such as:

//调用方js部分内容
var starPic=new Image()
starPic.src="上面图片地址"

var lastTime,deltaTime;

var stardog=new starObj()
stardog.init()

lastTime=Date.now()

gameloop()

function gameloop(){
    
    
	window.requestAnimFrame(gameloop)
	var now=Date.now()
	deltaTime=now-lastTime
	lastTime=now
	drawStars()
}

//真正控制动画的js文件
var satrObj=function(){
    
    
	this.x;
	this.y;
	this.picNo;
	this.timer;
}
starObj.prototype.init=function(){
    
    
	this.x=Math.random()*630+100;   //630：图片宽度
	this.y=Math.random()*70+150;   //70：图片高度
	this.picNo=0;
	this.timer=0;
}
starObj.prototype.update=function(){
    
    
	this.timer+=deltaTime;
	if(this.timer>50){
    
    
		this.picNo+=1;
		this.picNo%=7;
		this.timer=0;
	}
}
starObj.prototype.draw=function(){
    
    
	ctx.drawImage(starPic,0,0,this.picNo*70,70,this.x,this.y,70,70)
}

function drawStars(){
    
    
	stardog.update();
	stardog.draw();
}

There is no doubt that this approach has begun to require the combination of UI and front-end.
(I studied Alipay’s Spring Festival activities some time ago and found that the method of "importing animation files in the front end" is also used!)