Animations Pseudo-code using keyframes

animation-pseudo-code.markdown

Animations Pseudo-code using keyframes

// the below will be the images that you send over
var hexagon_shape = svg()
var checkmark_icon = svg()

// the views that are on the screen
var consent_view
var home_view

// initial setup
hexagon_shape.alpha = 0.0
hexagon_shape.scale = (scaleX: 0.0, scaleY: 0.0)
hexagon_shape.position = (x: center, y: 0.0)

checkmark_icon.scale = (scaleX: 0.0, scaleY: 0.0)
checkmark_icon.position = (x: center, y: 100.0)

animation(duration: 2.0) {
	add_keyframe(start: 0.0, end: 0.5) {
		// hide consnet view
		consent_view.alpha = 0.0
	}

	add_keyframe(start: 0.5, end: 1.0) {
		// show hexagon background and scale to original size
		hexagon_shape.alpha = 1.0
		hexagon_shape.scale = (scaleX: 1.0, scaleY: 1.0)

		// scale to original size
		checkmark_icon.scale = (scaleX: 1.0, scaleY: 1.0)
	}

	add_keyframe(start: 1.0, end: 1.5) {
		// scale down the checkmark
		checkmark_icon.scale = (scaleX: 0.3, scaleY: 0.3)

		// move checkmark to bottom of screen
		checkmark_icon.position = (x: center, y: 400.0)

		// hide chekmark
		checkmark_icon.alpha = 0.0
	}

	add_keyframe(start: 1.5, end: 2.0) {
		// hide hexagon
		hexagon_shape.alpha = 0.0
	}
}