Applications of beiser curves and CSS3 animation, SVG and canvas, css3svg

Applications of beiser curves and CSS3 animation, SVG and canvas, css3svg
Introduction

The beiser curve can produce a lot of complex effects. For example, the complex animation effect of a bounce ball first accelerates the descent, stops, and then gradually slows down when it starts to play.

Two common URLs for using the besserl curve are as follows:

Easing function: http://www.xuanfengge.com/easeing/easeing/

Cubic-bezr: http://cubic-bezier.com/

How to draw a curve using the besell Curve

A standard three-time betel curve needs4Points: the starting point, ending point (also called the anchor), and two separated intermediate points.

Both SVG, Canvas, and CSS3 animations involve these four points.

Combination of SVG and besell Curves

Svg Scalable Vector Graphics, 2d, and XML tags, similar to the following:

<svg width="160px" height="160px">  <path d="M10 80 ..." /></svg>

The SVG code is not specifically expanded (several articles can be serialized ).pathYou can draw any path, which naturally involves working with besell.

Three-time besell curve command:C x1 y1, x2 y2, x yTwo Control Points(x1,y1)And (x2,y2),(x,y)Indicates the end point of the curve. LetterCIt indicates specific actions and actions. In this case, uppercase is required to indicate the standard cubic beiser curve.

Let's take a look at the following code (snippets) that describes the beiser curve.MIndicates a specific action.moveToTo move the starting point of the drawing here ).

<svg width="190px" height="160px">  <path d="M10 10 C 20 20, 40 20, 50 10" stroke="3" fill="none"/>  <path d="M70 10 C 70 20, 120 20, 120 10" stroke="3" fill="none"/>  <path d="M130 10 C 120 20, 180 20, 170 10" stroke="3" fill="none"/>  <path d="M10 60 C 20 80, 40 80, 50 60" stroke="3" fill="none"/>  <path d="M70 60 C 70 80, 110 80, 110 60" stroke="3" fill="none"/>  <path d="M130 60 C 120 80, 180 80, 170 60" stroke="3" fill="none"/>  <path d="M10 110 C 20 140, 40 140, 50 110" stroke="3" fill="none"/>  <path d="M70 110 C 70 140, 110 140, 110 110" stroke="3" fill="none"/>  <path d="M130 110 C 120 140, 180 140, 170 110" stroke="3" fill="none"/></svg>

The curve effect is similar to the following figure:

We can see thatMNext to the start point, addCThe last three points constitute4Points.

Combination of Canvas and besell Curves

Canvas hasbezierCurveTo()The Code is as follows:

var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");ctx.beginPath();ctx.moveTo(20,20);ctx.bezierCurveTo(20,100,200,100,200,20);ctx.stroke();

Start Point: moveTo (20,100,200,100,200) Control Point 1: bezierCurveTo (20,100,200,100,200, 20) Control Point 2: bezierCurveTo (20,100,200,100,200, 20) End Point: bezierCurveTo (, 20)

Combination of CSS3 animation and besell Curve

The usage is as follows:

transition:cubic-bezier(.25,.1,.25,1)

Where.25,.1The coordinate specifies the anchor of the start point;.25,1The coordinates are for the point at the top of the antenna at the end point.

Someone may ask, what is CSS3 animation?cubic-bezierIt seems that there are only two points ~~

That's because the starting and ending points of the beiser curve of CSS3 are fixed.(0,0)And(1,1).

Several animation effects commonly used in css3:

Cubic: cubic-bezr (0.25, 0.1, 0.25, 1.0)
Linear: cubic-bezr (0.0, 0.0, 1.0, 1.0)
Cubic-in: cubic-bezr (0.42, 0, 1.0, 1.0)
Partition-out: cubic-bezr (0, 0, 0.58, 1.0)
Cubic-in-out: cubic-bezr (0.42, 0, 0.58, 1.0)

To achieve the effect of a ball:

Html code:

<div id="ball"></div><div id="floor"></div>

Css code:

body{margin:0;padding:0;}#ball{  background:red;  height:100px;  width:100px;  position:absolute;  top:10px;  left:20px;  border-radius:50px;}#floor{  position:absolute;  bottom:10px;  left:0px;  width:350px;  height:1px;  border-top:5px solid brown;}

Js Code:

;(function(){   var down=false,      trans='transition',      eventName='transitionend';  if(typeof document.body.style.webkitTransition==='string'){      trans='webkitTransition';      eventName='webkitTransitionEnd';   }else if(typeof document.body.style.MozTransition==='string'){      trans='MozTransition';    }var ball=document.getElementById('ball');var floor=document.getElementById('floor');function bounce(){     if(down){         ball.style[trans]="Top 1s cubic-bezier(0,.27,.32,1)";         ball.style.top='10px';         down=false;    }else{        ball.style[trans]="Top 1s cubic-bezier(1,0,0.96,0.91)";        ball.style.top=(floor.offsetTop-100)+'px';        down=true;    }}ball.addEventListener(eventName,bounce);bounce();})();

(Document. body. style. webkitTransition)
In the WebKit engine browser, when the transition animation of css3 ends, the webkitTransitionEnd event is triggered.

Effect:

: CSS3 Animation: ball bounce Animation

Summary

Canvas:

ctx.moveTo(0,0);ctx.bezierCurveTo(x1,y1,x2,y2,1,1);

SVG:

<path d="M0 0 C x1 y1, x2, y2, 1 1"/>

CSS3 is the starting point0,0; Endpoint is1, 1;

cubic-bezier(x1,y1, x2,y2)

Reference address: The baseline of the beiser curve and CSS3 animation, SVG, and canvas