class Inkcite::Animation

Constants

EASE
EASE_IN
EASE_IN_CUBIC

Advanced easing functions courtesy of matthewlein.com/ceaser/

EASE_IN_OUT
EASE_OUT
EASE_OUT_QUART
INFINITE

Infinite iteration count

LINEAR

Timing functions

Attributes

ctx[R]

Animation name, view context and array of keyframes

delay[RW]
duration[RW]
iteration_count[RW]
name[R]

Animation name, view context and array of keyframes

timing_function[RW]

Public Class Methods

new(name, ctx) click to toggle source
# File lib/inkcite/facade/animation.rb, line 48
def initialize name, ctx
  @name = name
  @ctx = ctx

  # Default values for the animation's properties
  @duration = 1
  @delay = 0
  @iteration_count = INFINITE
  @timing_function = LINEAR

  # Initialize the keyframes
  @keyframes = []

end

Public Instance Methods

add_keyframe(percent, styles={}) click to toggle source
# File lib/inkcite/facade/animation.rb, line 63
def add_keyframe percent, styles={}
  keyframe = Keyframe.new(percent, @ctx, styles)

  @keyframes << keyframe

  keyframe
end
blank?() click to toggle source

Returns true if this animation is blank - e.g. it has no keyframes.

# File lib/inkcite/facade/animation.rb, line 72
def blank?
  @keyframes.blank?
end
to_keyframe_css() click to toggle source
# File lib/inkcite/facade/animation.rb, line 76
def to_keyframe_css

  css = ''

  # Sort the keyframes by percent in ascending order.
  sorted_keyframes = @keyframes.sort { |kf1, kf2| kf1.percent <=> kf2.percent }

  # Iterate through each prefix and render a set of keyframes
  # for each.
  @ctx.prefixes.each do |prefix|
    css << "@#{prefix}keyframes #{@name} {\n"
    css << sorted_keyframes.collect { |kf| kf.to_css(prefix) }.join("\n")
    css << "\n}\n"
  end

  css

end
to_s() click to toggle source

Renders this Animation declaration in the syntax defined here developer.mozilla.org/en-US/docs/Web/CSS/animation e.g. “3s ease-in 1s 2 reverse both paused slidein”

# File lib/inkcite/facade/animation.rb, line 98
def to_s

  # The desired format is: duration | timing-function | delay |
  # iteration-count | direction | fill-mode | play-state | name
  # Although currently not all attributes are supported.
  css = [
      seconds(@duration),
      @timing_function
  ]

  # Negative delays start the animation mid-sequence whereas positive
  # values cause the animation to delay start.
  # https://css-tricks.com/starting-css-animations-mid-way/
  css << seconds(@delay) if @delay != 0

  css << @iteration_count

  css << @name

  css.join(' ')
end

Private Instance Methods

seconds(val) click to toggle source
# File lib/inkcite/facade/animation.rb, line 122
def seconds val
  "#{val}s"
end