Core Animation

My Research-notes on core animation

Through sheer persistence/stubbornness I got CVDisplayLink working in swift with CALayer and CGContext (The holy grail of OSX/iOS animation) also added this to vimeo 60 frames per sec. Silky smooth animation. Next up is trying it with some interactions as well. Also need to test it with Gradient etc. And path shifting.

CATransition doesn’t really animate the properties, rather it crossfades 2 graphic states. ~~To animate properties take a look at this link:~~ Listening for progress callbacks and vimeo link

The example above shows the humble beginnings of color tweening CA Layer CGContext (CATransition)

Content of page

1. Example
1. Notes
1. Brainstorming log
1. Tasks
1. Books
1. Resources
1. Animation inspiration
1. Peripheral links

Example:

Syntax Idea for implementing css animation with StyleKit: CSS:

Button:over {/*<--animate when the button is in this state*/
  animation-name: Property;
  animation-duration: 3s;/*the duration of the anim*/
  animation-name: slidein;/*<--ref your anim link here*/
}

@keyframes slidein {/*<--this is the link id to the anim*/
  from {/*<--from this state*/
    margin-left: 100%;
    width: 300%;
  }
  to {/*<--to this state*/
    margin-left: 0%;
    width: 100%;
  }
}

Note: the anim name can be used for the listeners in swift end and began listeners etc Note: you may also add easing and other properties. Do more research into the correct props etc

swift:

/*Nothing yet*/

Notes:

CADisplayLink: A CADisplayLink object is a timer object that allows your application to synchronize its drawing to the refresh rate of the display. CADisplayLink highly useful when the animation you want to create in an iOS app is something not easily handled by transitions or stock animations. CADisplayLink works very much like an NSTimer. You can set it to call a method on every tick, but instead of setting a time interval, the time interval is determined by the screen’s refresh rate. apple also has some info: apple CADisplayLink You can also use timeStamp and duration to skip frames if the framerate drops etc. Or set the frameRate it self to 30fps. You cant go above 60fps it seems. Aka the native device fps. ==CADisplayLink gives us a much better resolution that a NSTimer== to measure percentage complete use: percentComplete = elapsedTime / animationDuration;
CAKeyframeAnimation
CAMediaTiming
actionForLayer ~~it seems that this is the method you override if you want to animate custom properties~~ This has an example
CABasicAnimation
What not todo: http://www.raywenderlich.com/102590/how-to-create-a-complex-loading-animation-in-swift 1000++ lines of code to make a tiny animation. surly this should be handled by an animation suite that defines your anim in an xml like structure and then uses a Util method to play the sequence. You even have code on how to implement this.

turn of implicit anim http://stackoverflow.com/questions/2244147/disabling-implicit-animations-in-calayer-setneedsdisplayinrect?rq=1 and http://stackoverflow.com/questions/30986736/how-to-apply-complex-calayer-transform-changes

Tasks:

Books:

Foundation Animation: Making Things Move! http://www.amazon.com/Foundation-Actionscript-3-0-Animation-Making/dp/1590597915/ref=sr_1_3?ie=UTF8&qid=1456074234&sr=8-3&keywords=foundation+actionscript

Foundation Game Design ==(has Bouncing and gravity chapters)== http://www.amazon.com/Foundation-Game-Design-ActionScript-3-0/dp/143023993X/ref=pd_sim_146?ie=UTF8&dpID=51T7pjLcQ5L&dpSrc=sims&preST=_AC_UL160_SR130%2C160&refRID=1K0K4F63TKD756Z8QGBA

Resources:

Basic core anim: https://www.objc.io/issues/12-animations/animations-explained/
Some nice core anim features: http://oleb.net/blog/2010/12/animating-drawing-of-cgpath-with-cashapelayer/
Gradient animation (This is for the CAGradientLayer so not really usefull): https://github.com/joericioppo/CAGradientLayer_UI
identifying onComplete when using many animations: http://stackoverflow.com/questions/1255086/how-to-identify-caanimation-within-the-animationdidstop-delegate
Listening for progress callbacks
HitTesting animated layers: http://ronnqvi.st/hit-testing-animating-layers/ also a pdf copy here: https://dl.dropboxusercontent.com/u/2559476/Hit%20testing%20animating%20layers.pdf
log10 rubber band anim example: log10 anim
Another CADisplayLink tutorial
Watch the Session 421 - Core Animation Essentials video from WWDC 2011. It’s only an hour and it is ~~extremely informative.~~ https://developer.apple.com/videos/play/wwdc2011-421/
super simple CADisplayLink tutorial

Animation inspiration:

wobbly interface: https://github.com/brocoo/BRFlabbyTable
nice pull to refresh tutorial: http://ronnqvi.st/controlling-animation-timing/
facebook image paning tutorial from the app paper: http://subjc.com/facebook-paper-photo-panner/
Text drawing animation from real text: http://oleb.net/blog/2010/12/animating-drawing-of-cgpath-with-cashapelayer/
interesting playback scrubber for ios: http://subjc.com/castro-playback-scrubber/
parallax animation tutorial: http://mysterycoconut.com/blog/2011/09/cag4/
UIKit dynamics: https://www.objc.io/issues/12-animations/interactive-animations/

Peripheral links:

More nuanced info on CADisplayLink: http://www.ananseproductions.com/game-loops-on-ios/
This framework for IOS uses CADisplayLink and also has easing: https://github.com/intuit/AnimationEngine
video player with cadisplaylink https://developer.apple.com/library/ios/samplecode/AVBasicVideoOutput/Introduction/Intro.html#//apple_ref/doc/uid/DTS40013109
performance testing cadisplaylink on mobile devices (Layer Trees vs. Flat Drawing ): http://floriankugler.com/2013/05/24/layer-trees-vs-flat-drawing-graphics-performance-across-ios-device-generations/
Discussion on swift and CVDisplayLink open gl and using NSTimer as a substitute: http://stackoverflow.com/questions/25981553/cvdisplaylink-with-swift
GrandCentralDispatch based timer, for async timing: (can be used for frame anim) http://www.fieryrobot.com/blog/2010/07/10/a-watchdog-timer-in-gcd/

CVDisplayLink resources:

This code works in swift: https://github.com/steven741/basic-opengl-swift/blob/45179a646569fcb66738a2c68358df0d5ff458f8/Demo/OpenGLView.swift
indepth discussion about CVDisplayLink and CALAyer: http://stackoverflow.com/questions/7610117/layer-backed-openglview-redraws-only-if-window-is-resized

CPU Threading

I depth analysis of the state of UI CPU Threading: http://chat.stackoverflow.com/rooms/104337/opengl-on-macos-x-and-threading pdf copy here

Core animation