How to connect the two different Bezier curve animations of css3?
now I"m going to do a dynamic effect, which is connected by two css3 animations. There is a square A. the first stage is uniform motion, and the second stage is deceleration to the target point. The expectation is that after the uniform motion, the square An enters the deceleration motion, and the initial rate of the deceleration motion is consistent with the uniform motion. Only in this way can the two animations be combined smoothly.
jquery.transit.jscss3500px
the problem encountered now is that the square An and C are all 1000ms moving from the blue area, but after entering the gray area, the rates of An and C obviously change a little, rather than transition from the original uniform speed. For the convenience of testing, Box B always moves at a uniform speed.
online test address: https://codepen.io/quiettroja.
in order to make the starting rate of the deceleration motion of the square C closer to the uniform speed, I adjusted the deceleration time of the square C to 2000ms (the duration of the uniform motion is 1000ms), but there is still no connection. If you use a timer to do animation, this headache speed convergence problem can certainly be solved, but now I prefer to use css3 animation to do, on the one hand, convenient, second, high performance. What should I do?
use the animation tween library, kute.js,tween.js
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.wrap{width: 1000px; margin: 100px auto; height: 300px; background: linear-gradient(to right, -sharp05afd1 50%, -sharpccc 50%);}
.wrap div{width: 50px;height: 50px; margin-bottom: 20px; background: red; color: -sharpFFF; text-align: center; line-height: 50PX;}
</style>
</head>
<body>
<div class="wrap">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</div>
<script src = 'https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js'></script>
<script>
var t =new TimelineMax();
t.staggerTo('.wrap div',1,{x:500,ease:Linear.ease,
onComplete :function(){
t.staggerTo('.wrap div',1,{x:1000,ease:Cubic.easeOut});
}},0);
</script>
</body>
</html>
I don't know if it's what you want
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
-sharpdiv1{
width: 200px;
height: 200px;
background:red;
position: absolute;
left: 0;
}
</style>
<script>
window.onload = function () {
var oBtn = document.getElementById('btn');
var oDiv = document.getElementById('div1');
var timer = null;
oBtn.onclick = function () {
var start = 0;
speed = 500 / 30;
clearInterval(timer);
timer = setInterval(() => {
target = start += speed;
oDiv.style.left = target + 'px';
if (parseFloat(oDiv.style.left) == 500) {
clearInterval(timer)
timer = setInterval(() => {
speed *= 0.99;
target = start += speed;
oDiv.style.left = target + 'px';
if (parseFloat(oDiv.style.left) >= 998) {
oDiv.style.left = Math.floor(target) + 'px';
clearInterval(timer);
}
}, 10);
}
}, 10);
};
};
</script>
</head>
<body>
<input type="button" value="" id="btn">
<div id="div1"></div>
</body>
</html>
simulate it with primary school math, and adjust the rest of the effect by yourself. Thanks to my primary school teacher for giving me such esoteric math after raising pigs. By the way, the junior high school teacher told me that your effect is equivalent to a slow stop of constant speed skating by a friction force, and the distance used to stop will be half of the whole distance. Mr. Niu (Newton), there is a formula, but I didn't learn it. I just simulated you so rudely.
http://cubic-bezier.com/-sharp.21,.
the first paragraph uses linear, which is the blue straight line chart in the diagram.
the second paragraph uses custom bezier, which is red curve
.
from a graphical point of view, the reason for the visual abrupt change is that the two segments are not continuous at the splicing point (the slope is inconsistent)
the best solution is to use two lines like ease-out, in the second segment, the slope is closer and the visual continuity is better
.
to be truly continuous, we have to use mathematical methods to calculate the parameters, which I can't handle either.
