【動畫】簡易製作貝塞爾曲線動畫（JS+css3+canvas）

阿新 • • 發佈：2019-01-27

一些廢話（直接看程式碼的可跳過）

貝塞爾曲線：什麼是貝塞爾曲線？用過PS的就知道，那破鋼筆工具就是，什麼，沒用過？自行百度用法。

需要的工具

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>

過渡中的動畫

過渡中的動畫

結束的動畫

簡單解釋

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

關於

make：o︻そ╆OVE▅▅▅▆▇◤（清一色天空）

結束語

什麼，你說有啥用？這難道不像你的菊花嗎？^_^哈哈……開玩笑
你試著修改下曲線任意的值看看效果，不夠？那你修改下原始碼，增加下顏色的隨機性試試？

【動畫】簡易製作貝塞爾曲線動畫（JS+css3+canvas）

一些廢話（直接看程式碼的可跳過）貝塞爾曲線：什麼是貝塞爾曲線？用過PS的就知道，那破鋼筆工具就是，什麼，沒用過？自行百度用法。需要的工具 ctrl+c、ctrl+v 直接上程式碼 <!DOCTYPE html>

貝塞爾曲線動畫demo（仿美人相機效果）

效果如圖：仿美人相機，手勢滑動隱藏頂部view。為了方便講解，將螢幕分為幾個區域，如圖：在拖動過程中： 1、拖動距離小於minMoveDistance，貝賽爾曲線發生形變 2、拖動大於minMoveDistance，整個view開始下移在鬆開手時： 1、

一個貝塞爾曲線動畫演示

經常寫動畫，好的動畫效果，可以使應用的level提升好幾個檔次，下面有一個動畫顯得很舒服!個人表示很喜歡，在此做個記錄。 //貝塞爾曲線動畫 - (IBAction)clickAction:(UIButton *)sender { //把圖

購物車特效-貝塞爾曲線動畫(點選新增按鈕，產生拋物線動畫效果)

demo效果： l 購物車特效原理: 1.從新增按鈕獲取開始座標 2.從購物車圖示獲取結束座標 3.打氣一個檢視，新增屬性動畫ObjectAnimator(縮小),ValueAnimator(路線) 4.動畫開始時新增該檢視，動畫結束刪除該檢視 5.運動路徑使用T

貝塞爾曲線原理（轉載）

image cnblogs itblog gif 二次 fcc ike 轉載依次最近在做圖形學的實驗，關於貝塞爾曲線在網上看到一個非常好的資料：以下內容轉載自：https://www.cnblogs.com/hnfxs/p/3148483.html 原理和簡單推導

Android 控制元件沿貝塞爾曲線運動（中）

看了Android貝塞爾曲線屬性動畫（上）是不是在罵我SB，換個貝塞爾曲線的起始點，控制點，終點，控制元件還是按原來路徑運動，So.... 下面我實現了控制元件在隨機的一個貝塞爾曲線上的運動 package com.example.propertyanimsecdemo;

【轉】貝塞爾曲線介紹

con 系列 ani 線段課本 start http wpa -- 原文鏈接： http://blog.csdn.net/sangxiaonian/article/details/51984013 http://blog.csdn.net/sangxiaonian/art

iOS-電池圖標【結合貝塞爾曲線控制電量顯示】

radius 顯示 ios ner att OS super 1.0 self. 基於UIView類：WKJBatteryView WKJBatteryView.h #import <UIKit/UIKit.h> @interface WKJBatter

【演算法】-003 三次貝塞爾曲線的交點

【演算法】-003 三次貝塞爾曲線的交點最近在工作中遇到一個問題，想通過計算兩條三次貝塞爾曲線的交點位置。嘗試了列舉法之後覺得計算速度太慢，於是來找其他演算法。文章目錄【演算法】-003 三次貝塞爾曲線的交點 1、列舉法求貝塞爾曲線交

【Unity3d遊戲開發】遊戲中的貝塞爾曲線以及其在Unity中的實現

轉載收藏：原文連結https://www.cnblogs.com/msxh/p/6270468.html 閱讀目錄一、簡介二、公式三、實現與應用　　RT，馬三最近在參與一款足球遊戲的開發，其中涉及到足球的各種運動軌跡和路徑，比如射門的軌跡，高吊球

【原創】《矩陣的史詩級玩法》連載十九：用基向量矩陣實現二次貝塞爾曲線到標準拋物線的轉換

在講解磚塊鋪貼的時候，我們先用基礎的旋轉縮放等變換組合出了45度地圖鋪貼的變換矩陣。然後發現針對性太強，換成別的角度就很不好算了。接著改成了用基向量進行推導的方法。然後到二元二次方程，雖然我們可以通過旋轉的方法消滅掉xy項從而判斷出方程對應的曲線型別，但過程過於繁瑣，

【原創】《矩陣的史詩級玩法》連載二十一：用矩陣計算直線和二次貝塞爾曲線的交點

搞了這麼多理論，現在是時候展現一下矩陣的魅力了。看看經過矩陣變換後的曲線求交是何等的方便！上篇說過，矩陣簡化的效果立竿見影，如同連載二的直線橢圓相交判斷一樣。按我的套路，我是會先給出傳統的做法，然後再用矩陣的史詩級玩法將其擊敗，不過這次為了不讓大家看暈，我選擇把順序調

【Android開源專案解析】QQ“一鍵下班”功能實現解析——學習Path及貝塞爾曲線的基本使用

早在很久很久以前，QQ就實現了“一鍵下班”功能。何為“一鍵下班”？當你QQ有資訊時，下部會有資訊數量提示紅點，點選拖動之後，就會出現“一鍵下班”效果。本文將結合github上關於此功能的一個簡單實現，介紹這個功能的基本實現思路。專案地址

【UE4】【藍相簿】VR玩家（貝塞爾曲線移動，3DUI操作）

做一個藍相簿的積累。實現的原因：UE4提供的Character或者pawn不能滿足VR內有關玩家屬性的各種需要，所以有了本篇。實現的內容：人物可以通過貝塞爾曲線移動。可在3D世界中移動和操作UI。實現方式：貝塞爾曲線實現方式見上篇Blog點選開啟連結。 UI的操作實

【Qt OpenGL教程】28：貝塞爾曲面

第28課：貝塞爾曲面 (參照NeHe) 這次教程中，我們將介紹貝塞爾曲面，因此這是關於數學運算的一課（這導致很不好講），來吧，相信你能搞定它的！這一課中，我們並不是要做一個完整的貝塞爾曲面庫（庫的話OpenGL已經完成了），而是一個展示概念的程式，來讓你熟悉曲面是怎麼計算實

貝塞爾曲線實現的購物車添加商品動畫效果

right map 繪制開始 enter 監聽 idg 過程 protected 效果圖如下： 1.activity_main.xml <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xm

把商品添加到購物車的動畫效果（貝塞爾曲線）

param from mat 位置 hold pos 開始 onclick border 目錄(?)[+] 如圖：參考： Android補間動畫，屬性動畫實現購物車添加動畫思路：確定動畫的起終點在起終點之間使用二次貝塞爾曲線填充起終點之間的點的軌跡設置屬

貝塞爾曲線與CSS3動畫、SVG和canvas的應用

document cnblogs blank otto style 函數 alt one absolut 簡介貝塞爾曲線是可以做出很多復雜的效果來的，比如彈跳球的復雜動畫效果，首先加速下降，停止，然後彈起時逐漸減速的效果。使用貝塞爾曲線常用的兩個網址如下：緩動函

css貝塞爾曲線模仿餓了麽購物車小球動畫

viewport title output 代碼 put 動畫效果 doc int class 在線觀看貝塞爾曲線值：傳送門在線觀看動畫效果：傳送門代碼： <!DOCTYPE html> <html> <head> <me

可視化n次貝塞爾曲線及過程動畫演示--大寶劍

ike all AS 2個 pat title pre while todo 先拋一個動畫模擬的一個例子，吊一吊Xing趣（4次）不夠強？再來一個這樣子，滿足你。demo說明 git倉庫地址示例我眼睛花，沒看懂，能暫停不了？可以控制動畫暫停與繼續。（供大家清

【動畫】簡易製作貝塞爾曲線動畫（JS+css3+canvas）

一些廢話（直接看程式碼的可跳過）

需要的工具

直接上程式碼

簡單解釋

1）座標解釋

2）Y軸的坑

3）過程解釋

一個完整的DEMO

關於

結束語

相關推薦