CSS 3のアニメーションカーブを動画で作成

CSS 3のアニメーション(CSS Transitions Module Level 3)のカーブを動画で作成。

CSS Transitions Module Level 3
http://www.w3.org/TR/css3-transitions/

CSS 3のアニメーションって全部、ベジェ曲線なんですね。しかも、ease-inやease-outは引数が異なるだけみたいです。

Transition Timing Functions < CSS | The Art of Web
http://www.the-art-of-web.com/css/timing-function/

import math

size(640, 480)

speed(30)
base_line = 100
box_size = 400

x = 0
count = 0
step = 0
all = 0

def next_step():
    global x
    global count
    global step
    
    x = 0
    count = 0
    step += 1

def graph_bk_x():
    return WIDTH/2.0-box_size*.5

def graph_bk_y():
    return HEIGHT/2.0-box_size*.5
    
def graph_bk():
    fill(1, 1, 1)
    pos_x = graph_bk_x()
    pos_y = graph_bk_y()
    rect(pos_x, pos_y, box_size, box_size)
    stroke(0, 0, 0)
    line(pos_x, pos_y+box_size, pos_x+box_size, pos_y)
    
def draw():
    global count
    global step
    global all
    global x
    
    def cubic_bezier(x1, y1, x2, y2, t):
        x0 = 0.0
        y0 = 0.0
        x3 = 1.0
        y3 = 1.0
        x = (1-t)**3*x0 + 3*(1-t)**2*t*x1 + 3*(1-t)*t*t*x2 + t**3*x3
        y = (1-t)**3*y0 + 3*(1-t)**2*t*y1 + 3*(1-t)*t*t*y2 + t**3*y3
        return (x, y)
        
    fill(1, 1, 1)
    background(0, 0, 0)    
    
    if step == 0:
        # タイトル
        align(CENTER)
        fontsize(60)
        text("Cubic Bezier curves", 0, HEIGHT/2.0+15, WIDTH)
        count += 1
        if count >= 50:
            next_step()
    elif step == 1:
        # ease
        align(CENTER)
        fontsize(60)
        text("ease(default)", 0, HEIGHT/2.0+15, WIDTH)
        count += 1
        if count >= 50:
            next_step()
    elif step == 2:
        def ease(t):
            return cubic_bezier(0.25, 0.1, 0.25, 1.0, t)
            
        graph_bk()
        fill(1, 0, 0)
        stroke(1, 0, 0)
        pos_x = graph_bk_x()
        pos_y = graph_bk_y() + box_size
        t = float(x)/box_size
        cx, cy = ease(t)
        cx *= box_size
        cy *= box_size
        oval(cx-3 + pos_x, pos_y - cy-3, 6, 6)
        x += 3
        if x > box_size:
            next_step()
    elif step == 3:
        # ease-in
        align(CENTER)
        fontsize(60)
        text("ease-in", 0, HEIGHT/2.0+15, WIDTH)
        count += 1
        if count >= 50:
            next_step()
    elif step == 4:
        def ease_in(t):
            return cubic_bezier(0.42, 0, 1.0, 1.0, t)
            
        graph_bk()
        fill(1, 0, 0)
        stroke(1, 0, 0)
        pos_x = graph_bk_x()
        pos_y = graph_bk_y() + box_size
        t = float(x)/box_size
        cx, cy = ease_in(t)
        cx *= box_size
        cy *= box_size
        oval(cx-3 + pos_x, pos_y - cy-3, 6, 6)
        x += 3
        if x > box_size:
            next_step()
    elif step == 5:
        # ease-out
        align(CENTER)
        fontsize(60)
        text("ease-out", 0, HEIGHT/2.0+15, WIDTH)
        count += 1
        if count >= 50:
            next_step()
    elif step == 6:
        def ease_out(t):
            return cubic_bezier(0.0, 0.0, 0.58, 1.0, t)
            
        graph_bk()
        fill(1, 0, 0)
        stroke(1, 0, 0)
        pos_x = graph_bk_x()
        pos_y = graph_bk_y() + box_size
        t = float(x)/box_size
        cx, cy = ease_out(t)
        cx *= box_size
        cy *= box_size
        oval(cx-3 + pos_x, pos_y - cy-3, 6, 6)
        x += 3
        if x > box_size:
            next_step()
    elif step == 7:
        # ease-in-out
        align(CENTER)
        fontsize(60)
        text("ease-in-out", 0, HEIGHT/2.0+15, WIDTH)
        count += 1
        if count >= 50:
            next_step()
    elif step == 8:
        def ease_in_out(t):
            return cubic_bezier(0.42, 0.0, 0.58, 1.0, t)
            
        graph_bk()
        fill(1, 0, 0)
        stroke(1, 0, 0)
        pos_x = graph_bk_x()
        pos_y = graph_bk_y() + box_size
        t = float(x)/box_size
        cx, cy = ease_in_out(t)
        cx *= box_size
        cy *= box_size
        oval(cx-3 + pos_x, pos_y - cy-3, 6, 6)
        x += 3
        if x > box_size:
            next_step()

    if step != 10:
        all += 1
        #print "step:%d count:%d all:%d" % (step, count, all)
        if step == 9:
            next_step()

強火で進め

このブログではプログラム関連の記事を中心に書いてます。

CSS 3のアニメーションカーブを動画で作成

関連情報