JavaScript 캔버스는 회전 애니메이션을 구현합니다.-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

JavaScript 캔버스는 회전 애니메이션을 구현합니다.

Jan 18, 2018 am 11:28 AM

canvas javascript js

이 글에서는 회전 애니메이션을 구체적으로 구현하기 위한 JavaScript 캔버스를 주로 소개합니다. 관심 있는 친구들이 참고하면 도움이 될 것입니다.

캔버스의 캔버스를 사용하여 회전 애니메이션을 구현합니다. 외부 원은 시계 방향, 내부 레이어는 시계 반대 방향입니다.

코드 데모 링크 주소: 코드 데모 링크 주소

html 파일

&lt;!DOCTYPE html&gt; 
&lt;html&gt; 
&lt;head lang=&quot;en&quot;&gt; 
 &lt;meta charset=&quot;UTF-8&quot;&gt; 
 &lt;title&gt;&lt;/title&gt; 
 &lt;style&gt; 
  body { 
   margin: 0; 
   padding: 0; 
   overflow: hidden; 
   background-color: #f0f0f0; 
  } 
 &lt;/style&gt; 
 &lt;script src=&quot;js/konva.js&quot;&gt;&lt;/script&gt; 
 &lt;script src=&quot;js/circle.js&quot;&gt;&lt;/script&gt; 
&lt;/head&gt; 
&lt;body&gt; 
&lt;p id=&quot;cas&quot;&gt;&lt;/p&gt; 
 
&lt;script&gt; 
 var width = window.innerWidth; 
 var height = window.innerHeight; 
 //创建舞台 
 var stage = new Konva.Stage({ 
  container: &quot;cas&quot;, 
  width: width, 
  height: height 
 }); 
 //创建层 
 var layer = new Konva.Layer(); 
 //创建组1 
 var group = new Konva.Group({ 
  x: stage.width() / 2, 
  y: stage.height() / 2, 
 }); 
 //最外层圆 
 var circle1 = new Konva.Circle({ 
  x: 0, 
  y: 0, 
  radius: 250, 
  stroke: &quot;#ccc&quot;, 
  strokeWidth: 1, 
  dash: [6, 3] 
 }); 
 group.add(circle1); 
 //第二个圆 
 var circle2 = new Konva.Circle({ 
  x: 0, 
  y: 0, 
  radius: 150, 
  stroke: &quot;#ccc&quot;, 
  strokeWidth: 1, 
  dash: [6, 3] 
 }); 
 group.add(circle2); 
 //第三个圆 
 var circle3 = new Konva.Circle({ 
  x: 0, 
  y: 0, 
  radius: 135, 
  stroke: &quot;blue&quot;, 
  strokeWidth: 2, 
  dash: [10, 5] 
 }); 
 group.add(circle3); 
 //第四个圆 
 var circle4 = new Konva.Circle({ 
  x: 0, 
  y: 0, 
  radius: 105, 
  fill: &quot;#ccc&quot;, 
  opacity: 0.4 
 }); 
 group.add(circle4); 
 //第五个圆 
 var circle5 = new Konva.Circle({ 
  x: 0, 
  y: 0, 
  radius: 80, 
  fill: &quot;#74A2F0&quot; 
 
 }); 
 group.add(circle5); 
 //添加文字 
 var text = new Konva.Text({ 
  x: -80, 
  y: -12, 
  text: &quot;WEB全栈&quot;, 
  fill: &quot;white&quot;, 
  fontSize: 24, 
  width: 160, 
  align: &quot;center&quot; 
 }); 
 group.add(text); 
 layer.add(group); 
 //***************************************************** 
 //创建组2 
 var outGroup = new Konva.Group({ 
  x: stage.width() / 2, 
  y: stage.height() / 2, 
 }); 
 var arrColor = [&quot;red&quot;, &quot;green&quot;, &quot;blue&quot;, &quot;orange&quot;, &quot;purple&quot;]; 
 var arrText = [&quot;web&quot;, &quot;node.js&quot;, &quot;ajax&quot;, &quot;html5&quot;, &quot;css&quot;]; 
 for(var i = 0; i &lt; 5; i++) { 
  var cir = new Circle({ 
   x : 250 * Math.cos(72 * i * Math.PI / 180), //圆心x轴的坐标 
   y : 250 * Math.sin(72 * i * Math.PI / 180), //圆心y轴的坐标 
   outR : 60, //外圆的半径 
   inR : 50, //内圆的半径 
   fill : arrColor[i], //填充颜色 
   text: arrText[i], //文字 
   outOpacity : 0.3, //外圆的透明度 
   inOpacity : 0.6  //内圆的透明度 
  }); 
  cir.drawCircle(outGroup); 
 } 
 layer.add(outGroup); 
 
 //*********************************************** 
 //创建组3 
 var inGroup = new Konva.Group({ 
  x: stage.width() / 2, 
  y: stage.height() / 2, 
 }); 
 var arrColor = [&quot;red&quot;, &quot;green&quot;, &quot;blue&quot;, &quot;orange&quot;, &quot;purple&quot;]; 
 var arrText = [&quot;web&quot;, &quot;node.js&quot;, &quot;ajax&quot;, &quot;html5&quot;, &quot;css&quot;]; 
 for(var i = 0; i &lt; 5; i++) { 
  var cir = new Circle({ 
   x : 135 * Math.cos(90 * i * Math.PI / 180), //圆心x轴的坐标 
   y : 135 * Math.sin(90 * i * Math.PI / 180), //圆心y轴的坐标 
   outR : 45, //外圆的半径 
   inR : 35, //内圆的半径 
   fill : arrColor[i], //填充颜色 
   text: arrText[i], //文字 
   outOpacity : 0.3, //外圆的透明度 
   inOpacity : 0.6  //内圆的透明度 
  }); 
  cir.drawCircle(inGroup); 
 } 
 layer.add(inGroup); 
 
 //************************************************ 
 //运动动画 
 var step = 1; //转动的角度 
 var anim = new Konva.Animation(function() { 
  outGroup.rotate(step); 
  outGroup.getChildren().each(function (ele, index) { 
   ele.rotate(-step); 
  }); 
  inGroup.rotate(-step); 
  inGroup.getChildren().each(function (ele, index) { 
    ele.rotate(step); 
  }); 
 }, layer); 
 anim.start(); 
 stage.add(layer); 
 
 stage.on(&quot;mouseover&quot;, function () { 
  step = 0.3; 
 }); 
 stage.on(&quot;mouseout&quot;, function () { 
  step = 1; 
 }); 
&lt;/script&gt; 
&lt;/body&gt; 
&lt;/html&gt;

로그인 후 복사

js 파일

function Circle(obj) { 
 this._init(obj); 
} 
Circle.prototype = { 
 _init: function (obj) { 
  this.x = obj.x, //圆心x轴的坐标 
  this.y = obj.y, //圆心y轴的坐标 
  this.outR = obj.outR, //外圆的半径 
  this.inR = obj.inR, //内圆的半径 
  this.color = obj.fill, //填充颜色 
  this.text = obj.text, //内圆的文字 
  this.outOpacity = obj.outOpacity, //外圆的透明度 
  this.inOpacity = obj.inOpacity  //内圆的透明度 
 }, 
 drawCircle: function (group) { 
  //创建一个组 
  var groupCir = new Konva.Group({ 
   x: this.x, 
   y: this.y 
  }); 
  //外圆 
  var outCir = new Konva.Circle({ 
   x: 0, 
   y: 0, 
   radius: this.outR, 
   fill: this.color, 
   opacity: this.outOpacity 
  }); 
  groupCir.add(outCir); 
  //内圆 
  var inCir = new Konva.Circle({ 
   x: 0, 
   y: 0, 
   radius: this.inR, 
   fill: this.color, 
   opacity: this.inOpacity 
  }); 
  groupCir.add(inCir); 
  //添加文字 
  var text = new Konva.Text({ 
   x: -this.inR, 
   y: -10, 
   text: this.text, 
   fill: &quot;white&quot;, 
   fontSize: 20, 
   width: 2 * this.inR, 
   align: &quot;center&quot; 
  }); 
  groupCir.add(text); 
 
  group.add(groupCir); 
 } 
}

로그인 후 복사

효과 그림: