【动画】简易制作贝塞尔曲线动画(JS+CSS3+canvas)

im, 无色
im, 无色
im, 无色
884
文章
0
评论
2019年7月12日18:20:36 评论 497

一些废话(直接看代码的可跳过)

贝塞尔曲线:什么是贝塞尔曲线?用过PS的就知道,那破钢笔工具就是,什么,没用过?自行百度用法。

【动画】简易制作贝塞尔曲线动画(JS+CSS3+canvas)

需要的工具

  • ctrl+c、ctrl+v

直接上代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <style>
      body {
        position: fixed;
        background: black;
      }
      #flower {
        border: 1px solid red;
        width: 500px;
        height: 500px;
        position: relative;
      }
    </style>
  </head>
  <body>
    <div id="flower"></div>
  </body>
  <script>
    (function (data) {
      var _methods = {
        // 初始化
        init: function () {
          this.data = data.data
          this.e = data.e
          this.count = data.number
          this.color = data.color
          // number = 度数° --- this.count = 循环次数
          this.number = 360 / this.count
          for (var i = 0, j = .1; i < this.count; i++, j += .1) {
            var canvas = document.createElement('canvas')
            canvas.id = 'flower' + i
            canvas.height = data.height
            canvas.width = data.width
            canvas.style.position = 'absolute'
            canvas.style.transition = j + 's ease'
            this.$(this.e).appendChild(canvas)
            // 绘图
            this.painting(this.$('flower' + i))
          }
          // 动画
          this.handle()
        },
        // 绘图
        painting: function (e) {
          var ctx = e.getContext("2d")
          ctx.beginPath()
          // ----起始坐标(x, y)
          ctx.moveTo(this.data.start.x, this.data.start.y)
          // ----曲线坐标(x, y)--结束坐标(x, y)
          ctx.quadraticCurveTo(this.data.curve.x, this.data.curve.y, this.data.end.x, this.data.end.y)
          /* 轴对称 --- 只针对曲线左到右 */
          ctx.moveTo(this.data.start.x, this.data.start.y)
          ctx.quadraticCurveTo(this.data.start.x + this.data.curve.x, this.data.curve.y, this.data.end.x, this.data.end.y)
          ctx.fillStyle = this.color
          ctx.strokeStyle = this.color
          ctx.globalAlpha = 0.1
          ctx.fill()
          ctx.stroke()
        },
        // 动画
        handle: function () {
          var self = this
          var i = 0
          var timer = setInterval(function () {
            if (i > self.count) {
              clearInterval(timer)
              return
            }
            self.$('flower' + i).style.transform = 'rotate(' + i * self.number + 'deg)'
            i++
          })
        },
        $: function (dom) {
          return document.getElementById(dom)
        }
      }
      _methods.init()
    })({
      /* 配置项 */
      e: "flower",
      height: 500,
      width: 500,
      color: '#cc00ff',
      data: {
        // ----起始坐标(x, y)
        start: {
          x: 250,
          y: 0
        },
        // ----曲线坐标(x, y)
        curve: {
          x: 125,
          y: 125
        },
        // ----结束坐标(x, y)
        end: {
          x: 250,
          y: 250
        }
      },
      // 数量
      number: 15
    })
  </script>
</html>
复制代码
【动画】简易制作贝塞尔曲线动画(JS+CSS3+canvas)

过渡中的动画


【动画】简易制作贝塞尔曲线动画(JS+CSS3+canvas)

这里推荐一个网站可以免费手画贝塞尔曲线,可以复制里面的值: http://www.j--d.com/bezier


简单解释

1)坐标解释

// ----起始坐标(x, y)
start: {
  x: 250,
  y: 0
},
// ----曲线坐标(x, y)
curve: {
  x: 125,
  y: 125
},
// ----结束坐标(x, y)
end: {
  x: 250,
  y: 250
}

复制代码

这里真的是坑走多了得出的结论,稍微要解释的就是中间的曲线坐标,他就是两点之间的曲线角度

2)Y轴的坑

所有的Y轴为顶点到底部的距离值非左下角原点

3)过程解释

init(初始化遍历生成Dom结构并执行painting绘图Canvas) handle(生成动画)


一个完整的DEMO

github:https://github.com/gs3170981/JsCanvasCss3_rotate(好用的话记得加星哦!)


关于

make:o︻そ╆OVE▅▅▅▆▇◤(清一色天空)

blog:http://blog.csdn.net/mcky_love


结束语

什么,你说有啥用?这难道不像你的菊花吗?^_^哈哈......开玩笑 你试着修改下曲线任意的值看看效果,不够?那你修改下源代码,增加下颜色的随机性试试?\

im, 无色
  • 本文由 发表于 2019年7月12日18:20:36
2019 年最好用的 JavaScript 图表库 JavaScript

2019 年最好用的 JavaScript 图表库

作者:Saurabh Barot 翻译:王强 大数据时代,收集和使用数据的需求正在爆发式增长,数据可视化也变得愈加重要。开发人员在想方设法将不同数据库中的记录整合到仪表板和漂亮的图表中,向人们快速直观...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: