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