Thomas Alexander Heatherwick 倫敦翻滾橋動畫效果：

倫敦翻滾橋

SU簡化模擬旋轉動畫效果▼

SU簡化模擬倫敦翻滾橋動畫效果

上一講我們實現(xiàn)了平滑拉高的效果，今天繼續(xù)帶小可愛們來看一下如何實平滑移動和平滑旋轉效果。

時鐘那一件我們提到了Geom::Transformation ,我們再來看下官方的demo：

移動translation

vector = Geom::Vector3d.new(0, 1, 0)
tr = Geom::Transformation.translation(vector)

旋轉rotation

point = Geom::Point3d.new(10, 20, 0)
vector = Geom::Vector3d.new(0, 0, 1)
angle = 45.degrees # Return 45 degrees in radians.
transformation = Geom::Transformation.rotation(point, vector, angle)

縮放scaling

point = Geom::Point3d.new(20, 30, 0)
scale = 10
tr = Geom::Transformation.scaling(point, scale)

參考平滑拉高，我們把移動、旋轉和縮放放入我們的延時循環(huán)體中去，就能得到對應的平滑動畫效果。

那我們再來實現(xiàn)一個復雜一點的放轉效果，文章首圖介紹托馬斯·亞歷山大·赫斯維克設計的倫敦翻滾橋。

簡化版旋轉動畫效果▼

簡化版旋轉動畫效果

思路分析：

• 簡化橋體，由八節(jié)組成，每塊占45度角

• 簡化旋轉，讓每節(jié)橋體按順序旋轉45度

• 第N個塊旋轉的時候帶上前面所有塊

首先初始化模型，簡化每節(jié)橋體為一個長方體，設置長寬高，.mm可以設置我們的長度單位:

# 1、初始化模型，簡化橋每節(jié)長寬高
mod = Sketchup.active_model
ent = mod.entities
width = 100.mm
depth = 200.mm
height = 20.mm

2、新建一個組件，繪制第一節(jié)橋體▼

第一節(jié)橋體

新建一個組件來存放第一節(jié)橋體，畫一個面拉成體塊得到我們第一節(jié)橋：

# 2、新建一個組件，繪制第一節(jié)橋體
gp_01 = ent.add_group
face = gp_01.entities.add_face [0,0,0], [width,0,0], [width,depth,0], [0,depth,0]
face.reverse!
face.pushpull height

3、新建一個列表存放復制的8節(jié)橋體▼

image

復制7節(jié)橋體并把8節(jié)橋體存放到列表：

# 3、新建一個列表存放復制的8節(jié)橋體
gps = Array.new
gps[0] = gp_01
(2..8).each do |i|
  gps[i-1] = gp_01.copy
  tr = Geom::Transformation.new [width*(i-1),0,0]
  ent.transform_entities tr,  gps[i-1]
end

設置總節(jié)數(shù)N ，旋轉45度拆分成45次動畫，每次旋轉-1度：

# 4、共8節(jié)橋，每節(jié)旋轉45度，拆分成45次，每次旋轉-1度
n = 7
x = -1
frequency = 44

5、第N節(jié)橋體旋轉帶上之前的橋體▼

第N節(jié)橋體旋轉帶上之前的橋體

首先通過橋體寬度width計算每次旋轉的旋轉軸坐標center。每次旋轉的時候我們需要帶上之前已經旋轉過的橋體組件。

gps[7]
gps[7]+gps[6]
gps[7]+gps[6]+gps[5]
...

最后把動作拆分到N個frequency里面：

# 5、循環(huán)延時旋轉橋體
(0..n).each do |i|
  (frequency*i..frequency*(i+1)).each do |s|
      UI.start_timer(s*0.01 , false) {
      tr_no = n-i+1

      # 計算每次旋轉的軸
      center = [width*tr_no,0,0]
      tr = Geom::Transformation.new center,[0,1,0],x.degrees

      # 第N節(jié)橋體旋轉帶上之前的橋體
      (0..i-1).each do |i|
        ent.transform_entities  tr,  gps[n-i]
      end
  } 
  end 
end

完整代碼：

# 1、初始化模型，簡化橋每節(jié)長寬高
mod = Sketchup.active_model
ent = mod.entities
width = 100.mm
depth = 200.mm
height = 20.mm

# 2、新建一個組件，繪制第一節(jié)橋體
gp_01 = ent.add_group
face = gp_01.entities.add_face [0,0,0], [width,0,0], [width,depth,0], [0,depth,0]
face.reverse!
face.pushpull height

# 3、新建一個列表存放復制的8節(jié)橋體
gps = Array.new
gps[0] = gp_01
(2..8).each do |i|
  gps[i-1] = gp_01.copy
  tr = Geom::Transformation.new [width*(i-1),0,0]
  ent.transform_entities tr,  gps[i-1]
end

# 4、共8節(jié)橋，每節(jié)旋轉45度，拆分成45次，每次旋轉-1度
n = 7
x = -1
frequency = 44

# 5、循環(huán)延時旋轉橋體
(0..n).each do |i|
  (frequency*i..frequency*(i+1)).each do |s|
      UI.start_timer(s*0.01 , false) {
      tr_no = n-i+1

      # 計算每次旋轉的軸
      center = [width*tr_no,0,0]
      tr = Geom::Transformation.new center,[0,1,0],x.degrees

      # 第N節(jié)橋體旋轉帶上之前的橋體
      (0..i-1).each do |i|
        ent.transform_entities  tr,  gps[n-i]
      end
  } 
  end 
end

那把組件里面的橋體替換成我們文章首圖的橋體，就能得到我們首圖的效果了。

然后如果我們想把折疊起來的橋再展開，需要需要怎么實現(xiàn)呢？公眾號回復 翻滾橋 獲取展開和收起的插件。

文章轉載請注明出處author by Nicaicaiwo

Nicaicaiwo