Thomas Alexander Heatherwick 伦敦翻滚桥动画效果：
伦敦翻滚桥
SU简化模拟旋转动画效果▼
SU简化模拟伦敦翻滚桥动画效果
上一讲我们实现了平滑拉高的效果，今天继续带小可爱们来看一下如何实平滑移动和平滑旋转效果。
时钟那一件我们提到了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)
参考平滑拉高，我们把移动、旋转和缩放放入我们的延时循环体中去，就能得到对应的平滑动画效果。
那我们再来实现一个复杂一点的放转效果，文章首图介绍托马斯·亚历山大·赫斯维克设计的伦敦翻滚桥。
简化版旋转动画效果▼
简化版旋转动画效果
思路分析：
简化桥体，由八节组成，每块占45度角
简化旋转，让每节桥体按顺序旋转45度
第N个块旋转的时候带上前面所有块
首先初始化模型，简化每节桥体为一个长方体，设置长宽高，.mm可以设置我们的长度单位:
# 1、初始化模型，简化桥每节长宽高
mod = Sketchup.active_model
ent = mod.entities
width = 100.mm
depth = 200.mm
height = 20.mm
2、新建一个组件，绘制第一节桥体▼
第一节桥体
新建一个组件来存放第一节桥体，画一个面拉成体块得到我们第一节桥：
# 2、新建一个组件，绘制第一节桥体
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节桥体▼
image
复制7节桥体并把8节桥体存放到列表：
# 3、新建一个列表存放复制的8节桥体
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
设置总节数N ，旋转45度拆分成45次动画，每次旋转-1度：
# 4、共8节桥，每节旋转45度，拆分成45次，每次旋转-1度
n = 7
x = -1
frequency = 44
5、第N节桥体旋转带上之前的桥体▼
第N节桥体旋转带上之前的桥体
首先通过桥体宽度width计算每次旋转的旋转轴坐标center。每次旋转的时候我们需要带上之前已经旋转过的桥体组件。
gps[7]
gps[7]+gps[6]
gps[7]+gps[6]+gps[5]
...
最后把动作拆分到N个frequency里面：
# 5、循环延时旋转桥体
(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节桥体旋转带上之前的桥体
(0..i-1).each do |i|
ent.transform_entities tr, gps[n-i]
end
}
end
end
完整代码：
# 1、初始化模型，简化桥每节长宽高
mod = Sketchup.active_model
ent = mod.entities
width = 100.mm
depth = 200.mm
height = 20.mm
# 2、新建一个组件，绘制第一节桥体
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节桥体
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节桥，每节旋转45度，拆分成45次，每次旋转-1度
n = 7
x = -1
frequency = 44
# 5、循环延时旋转桥体
(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节桥体旋转带上之前的桥体
(0..i-1).each do |i|
ent.transform_entities tr, gps[n-i]
end
}
end
end
那把组件里面的桥体替换成我们文章首图的桥体，就能得到我们首图的效果了。
然后如果我们想把折叠起来的桥再展开，需要需要怎么实现呢？公众号回复 翻滚桥 获取展开和收起的插件。
文章转载请注明出处author by Nicaicaiwo
Nicaicaiwo
