Here, physical animation refers to the fact that the animation effect of a graphic is similar to the physical effect in real life, such as the effect of gravity.
In fact, the realization of an animation is to split an action into consecutive intervals to complete it, and it is visually moving.
For example, if you move an image from the left to the right and set the total distance to 100, the result will be displayed if you move it to 1 every 1/40 seconds.
The time interval and distance interval are set to the best value. There are some aesthetic definitions. We will not discuss them here.
An example of dragging and tearing windowsTearcloth.html
<!--Add by oscar999--><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE> New Document </TITLE><META NAME="Author" CONTENT="oscar999"><link rel="stylesheet" type="text/css" href="tearCloth.css" /></HEAD><BODY><canvas id = "c" > </canvas> <div id="info"> <div id="top"> <a id="close" href="">close</a> </div> <p> <br> - Tear the cloth with your mouse.<br><br> - Right click and drag to cut the cloth<br><br> - Reduce physics_accuracy if it's laggy.<br><br> </p></div><script src="tearCloth.js"></script></BODY></HTML>
Tearcloth.css
* { margin: 0; overflow:hidden; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; }body { background:#333;}canvas { background:#333; width:100%; height:376px; margin:0 auto; display:block;}#info { position:absolute; left:-1px; top:-1px; width:auto; max-width:380px; height:auto; background:#f2f2f2; border-bottom-right-radius:10px;}#top { background:#fff; width:100%; height:auto; position:relative; border-bottom:1px solid #eee;}p { font-family:Arial, sans-serif; color:#666; text-align:justify; font-size: 16px; margin:10px;}a { font-family:sans-serif; color:#444; text-decoration:none; font-size: 20px;}#site { float:left; margin: 10px; color: #38a; border-bottom:1px dashed #888;}#site:hover { color: #7af;}#close { float:right; margin: 10px;}#p { font-family: Verdana, sans-serif; position:absolute; right:10px; bottom:10px; color:#adf; border: 1px dashed #555; padding:4px 8px;}
Tearcloth. js
document.getElementById('close').onmousedown = function(e) { e.preventDefault(); document.getElementById('info').style.display = 'none'; return false;};// settingsvar physics_accuracy = 6,mouse_influence = 20, mouse_cut = 5,gravity = 900, cloth_height = 30,cloth_width = 50,start_y = 20,spacing = 7,tear_distance = 60;window.requestAnimFrame =window.requestAnimationFrame ||window.webkitRequestAnimationFrame ||window.mozRequestAnimationFrame ||window.oRequestAnimationFrame ||window.msRequestAnimationFrame ||function(callback) { window.setTimeout(callback, 1000 / 60);};var canvas,ctx,cloth,boundsx,boundsy,mouse = {down: false,button: 1,x: 0,y: 0,px: 0,py: 0};window.onload = function() {canvas = document.getElementById('c');ctx = canvas.getContext('2d');canvas.width = canvas.clientWidth;canvas.height = 376;canvas.onmousedown = function(e) {mouse.button = e.which;mouse.px = mouse.x;mouse.py = mouse.y; var rect = canvas.getBoundingClientRect(); mouse.x = e.clientX - rect.left, mouse.y = e.clientY - rect.top,mouse.down = true;e.preventDefault();};canvas.onmouseup = function(e) {mouse.down = false;e.preventDefault();};canvas.onmousemove = function(e) {mouse.px = mouse.x;mouse.py = mouse.y;var rect = canvas.getBoundingClientRect(); mouse.x = e.clientX - rect.left, mouse.y = e.clientY - rect.top,e.preventDefault();};canvas.oncontextmenu = function(e) {e.preventDefault(); };boundsx = canvas.width - 1;boundsy = canvas.height - 1;ctx.strokeStyle = 'rgba(222,222,222,0.6)';cloth = new Cloth();update();};var Point = function(x, y) {this.x = x;this.y = y;this.px = x;this.py = y;this.vx = 0;this.vy = 0;this.pin_x = null;this.pin_y = null;this.constraints = [];};Point.prototype.update = function(delta) {if (mouse.down) {var diff_x = this.x - mouse.x,diff_y = this.y - mouse.y,dist = Math.sqrt(diff_x * diff_x + diff_y * diff_y);if (mouse.button == 1) {if(dist < mouse_influence) {this.px = this.x - (mouse.x - mouse.px) * 1.8;this.py = this.y - (mouse.y - mouse.py) * 1.8;}} else if (dist < mouse_cut) this.constraints = [];}this.add_force(0, gravity);delta *= delta;nx = this.x + ((this.x - this.px) * .99) + ((this.vx / 2) * delta);ny = this.y + ((this.y - this.py) * .99) + ((this.vy / 2) * delta);this.px = this.x;this.py = this.y;this.x = nx;this.y = ny;this.vy = this.vx = 0};Point.prototype.draw = function() {if (this.constraints.length <= 0) return;var i = this.constraints.length;while(i--) this.constraints[i].draw();};Point.prototype.resolve_constraints = function() {if (this.pin_x != null && this.pin_y != null) {this.x = this.pin_x;this.y = this.pin_y;return;}var i = this.constraints.length;while(i--) this.constraints[i].resolve();this.x > boundsx ? this.x = 2 * boundsx - this.x : 1 > this.x && (this.x = 2 - this.x);this.y < 1 ? this.y = 2 - this.y : this.y > boundsy && (this.y = 2 * boundsy - this.y);};Point.prototype.attach = function(point) {this.constraints.push(new Constraint(this, point));};Point.prototype.remove_constraint = function(lnk) {var i = this.constraints.length;while(i--) if(this.constraints[i] == lnk) this.constraints.splice(i, 1);};Point.prototype.add_force = function(x, y ) {this.vx += x;this.vy += y;};Point.prototype.pin = function(pinx, piny) {this.pin_x = pinx;this.pin_y = piny;};var Constraint = function(p1, p2) {this.p1 = p1;this.p2 = p2;this.length = spacing;};Constraint.prototype.resolve = function() {var diff_x = this.p1.x - this.p2.x,diff_y = this.p1.y - this.p2.y,dist = Math.sqrt(diff_x * diff_x + diff_y * diff_y),diff = (this.length - dist) / dist;if (dist > tear_distance) this.p1.remove_constraint(this);var px = diff_x * diff * 0.5;var py = diff_y * diff * 0.5;this.p1.x += px;this.p1.y += py;this.p2.x -= px;this.p2.y -= py;};Constraint.prototype.draw = function() {ctx.moveTo(this.p1.x, this.p1.y);ctx.lineTo(this.p2.x, this.p2.y);};var Cloth = function() {this.points = [];var start_x = canvas.width / 2 - cloth_width * spacing / 2;for(var y = 0; y <= cloth_height; y++) {for(var x = 0; x <= cloth_width; x++) {var p = new Point(start_x + x * spacing, start_y + y * spacing); x != 0 && p.attach(this.points[this.points.length - 1]);y == 0 && p.pin(p.x, p.y);y != 0 && p.attach(this.points[x + (y - 1) * (cloth_width + 1)])this.points.push(p);}}};Cloth.prototype.update = function() {var i = physics_accuracy;while(i--) {var p = this.points.length;while(p--) this.points[p].resolve_constraints();}i = this.points.length;while(i--) this.points[i].update(.016);};Cloth.prototype.draw = function() {ctx.beginPath();var i = cloth.points.length;while(i--) cloth.points[i].draw();ctx.stroke();};function update() {ctx.clearRect(0, 0, canvas.width, canvas.height);cloth.update();cloth.draw();requestAnimFrame(update);}
Open the HTML file to see the effect, preferably in chrome and Firefox.
You can also view the effect online through the following link:
Http://lonely-pixel.com/lab/cloth/
Other examples
In addition to the above effect, you can also see more similar effects
Http://lonely-pixel.com/
Framework
In this age of JS frameworks, you may ask if there is a JS framework that makes it easy for me to implement these effects.
The answer is yes: Yes,
Verlet-JS is better.
Verlet-JS is a simple physical engine implemented using JavaScript.
The official website is:
Http://subprotocol.com/verlet-js/
Examples are as follows.
Examples
The spider crawled on the Internet ..
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
