Support timing function for animation. Fix #12 #13 #478

phimage · 2017-05-11T06:26:38Z

Re pull #456
Timing function enum added TiminFunctionType

Add it to Animatable objects and AnimationConfiguration
Use this enum when possible instead of CAMediaTimingFunction

TODO

add more type in enum (see extension CAMediaTimingFunction)
add more type in enum see CAMediaTimingFunction( contructors in code
add custom type with control points in enum ?
manage spring animation or not, animation default value
Add an example
Update CHANGELOG
Documentation

…ublic-changes"

IBAnimatableBot · 2017-05-11T06:35:10Z

	2 Warnings
⚠️	Big PR
⚠️	Consider adding supporting documentation to this change. Documentation can be found in the `docs` directory.

Generated by 🚫 Danger

With TimingFunction position is animated using centre point

tbaranes · 2017-05-15T07:44:22Z

@phimage Sorry it takes me time to review it, it's quite big and a lot to digest!
I have already a first comment: can you update the docs? I think you will the one to update is Documentation/APIs.md

phimage · 2017-05-15T07:49:02Z

No problem!

API doc has not been reverted https://github.com/IBAnimatable/IBAnimatable/blob/master/Documentation/APIs.md
I add timingFunction in "Animatable protocol" section.
If you think I can add something elsewhere, I will do it :)

I see x, y, repeat.. attributes in the same section, maybe old parameters, now directly in animationType

tbaranes

That's a HUGE work, thanks for doing this, it's an awesome feature.
I let a few comments, mainly typos / minor stuff, it looks pretty good to me 👍

Can you add the docs update once more? I think that's enough.

tbaranes · 2017-05-15T07:52:02Z

IBAnimatable/TimingFunctionType.swift

+      let c2 = (params[2].toFloat() ?? 0, params[3].toFloat() ?? 0)
+      self = .custom(c1, c2)
+
+    case "easeinsine":


Can you add a comment as the ones above to keep the same structure as the enum?

tbaranes · 2017-05-15T07:53:22Z

IBAnimatable/TimingFunctionType.swift

+  case easeInExpo, easeOutExpo, easeInOutExpo
+  case easeInCirc, easeOutCirc, easeInOutCirc
+  case easeInBack, easeOutBack, easeInOutBack
+


Typo: there's one newline to remove

tbaranes · 2017-05-15T07:54:12Z

IBAnimatable/TimingFunctionType.swift

+    case "easeinoutback":
+      self = .easeInOutBack
+
+    default:


Same here, I know it's already explicit, but I think it's better to keep the same structure as the enums. It helps to follow

tbaranes · 2017-05-15T07:55:17Z

IBAnimatable/TimingFunctionType.swift

+extension TimingFunctionType {
+
+  public var caType: CAMediaTimingFunction {
+    switch self {


Same as above, if you can add the comments to separate the main groups

Github didn't see as fixed, but it's fixed!

tbaranes · 2017-05-15T07:56:01Z

IBAnimatable/TimingFunctionType.swift

+
+}
+
+@available(iOSApplicationExtension 10.0, *)


iOSApplicationExtension, did you mean iOS?

tbaranes · 2017-05-15T07:57:37Z

IBAnimatable/TimingFunctionType.swift

+
+}
+
+internal extension CAAnimation {


Is there a reason to explicitly make it internal?

It's a way for me to mark dangerous extension
I want to use it internally but never let it public, or someone else does it.

With internal explicitly marked, people ask themselves why and edit carefully

tbaranes · 2017-05-15T07:58:00Z

IBAnimatable/TimingFunctionType.swift

+
+internal extension CAAnimation {
+
+  // conveniant setter, getter not implemented


Typo: conveniant -> convenient

tbaranes · 2017-05-15T07:58:55Z

IBAnimatableApp/AnimationsTimingFunctionViewController.swift

+  func timingFunctionSelected(_ timingFunction: TimingFunctionType)
+}
+
+class AnimationsTimingFunctionViewController: UIViewController {


tbaranes · 2017-05-15T07:59:41Z

IBAnimatableApp/AnimationsViewController.swift

@@ -12,13 +12,14 @@ private let fadeWayParams = ParamType(fromEnum: AnimationType.FadeWay.self)
 private let axisParams = ParamType(fromEnum: AnimationType.Axis.self)
 private let rotationDirectionParams = ParamType(fromEnum: AnimationType.RotationDirection.self)
 private let positiveNumberParam = ParamType.number(min: 0, max: 50, interval: 2, ascending: true, unit:"")
-private let numberParam = ParamType.number(min: -50, max: 50, interval: 5, ascending: true, unit: "")
+private let numberParam = ParamType.number(min: -50, max: 200, interval: 10, ascending: true, unit: "")
 private let repeatCountParam = ParamType.number(min: 1, max: 10, interval: 1, ascending: true, unit:"")

 class AnimationsViewController: UIViewController {


I think do a PR to set all final it's a better choice
Because here it's not a new code here. But I copy this code to make my new controller :-)

Yeah, I know that we didn't add the final at the beginning of this project, we should have this in our roadmap: add all the missing finals 💥

tbaranes · 2017-05-15T08:18:50Z

Just tested the example, great one. A few feedbacks:

At first, I though that the timing function will update the animation. Since it doesn't, you should either do it, or refactoring makes a subsections to "Animations" to have two possibilities: "View Animations", and "Timing functions"
The image in the navigation bar isn't explicit enough (I didn't get it at first), if you choose option 1 from the previous point, we should replace the image by a text, or move the button in a place even more visible / explicit
Since some timingFunctions are quite long, they are truncated in the picker. Can we add the selected name somewhere? Below the graph for example. I think we have this issue in others picker as well, time to take care of this by starting with this one? 😬
I know there's a few incoherence about this in the playground: should we have a "back" text and no title, or no "back" text and a title? By using "TimingFunctions", I would go for option 2 to make it more explicit, but it's up to you. Some day it would be great to uniformise that behaviour

phimage · 2017-05-15T08:44:24Z

The animation is updated in the previous view, TimingFunctionPickDelegate do it

But not all animation are compatible ie. Spring animation are not compatible
In the same way velocity, dumping are only for spring animation and update it will not affect a lot of animations
Maybe a documentation file with a list of animation with two columns: Spring animation and timing function animation(or cubic animation) will be necessary, to check option compatibility

I edit moveTo and moveBy to be compliant with the two modes.

Yes, the image is not explicit
I take an available image, a timer. I think about putting a timing function graph but failed to create it using my TimingFunctionView in navigation bar items.

…rable by timing function Redesign back button and title for timing function picker controller Typo, comment on TimingFunctiontType

phimage · 2017-05-15T21:07:49Z

So new change added

back button and navigation title for the timing function picker
icon changed to a Gear, and the button is enabled only if the selected animation is configurable using the timing function

Added on AnimationType two compute boolean variables to know is the animation use velocity and damping or use timing function
This method could help for future animation documentations

SD10 · 2017-05-15T21:08:38Z

@phimage this is great work! I may be able to leverage this approach to do more cleanup or adopt a similar strategy. love it!

tbaranes

@phimage Awesome! I agree with you that a docs about timing function compatibility would be great, but we can merged that one first. So, just the missing entry in the docs and that's ready to go 👍

phimage · 2017-05-16T06:50:46Z

For the doc, as I say, I do already something in main branch, see Animatable protocol
https://github.com/IBAnimatable/IBAnimatable/blob/master/Documentation/APIs.md

tbaranes

My bad, I misunderstood 😶

JakeLin

All good, great work 👍👍👍. Look forward to using it.

JakeLin · 2017-05-17T04:05:39Z

IBAnimatable/ActivityIndicatorAnimationOrbit.swift

    opacityAnimation.keyTimes = [0, 0.45, 1]
-    ring1ScaleAnimation.timingFunctions = [CAMediaTimingFunction(name: kCAMediaTimingFunctionLinear), timingFunction]
+    opacityAnimation.timingFunctionsType = [.linear, .easeOutExpo]


good to encapsulate to an extension for timing function.

JakeLin · 2017-05-17T04:08:04Z

IBAnimatable/Animatable.swift

 }

-public extension Animatable where Self: UIView {
+public extension Animatable {


I hope Swift can support the syntax like public extension Animatable where Self: UIView or UIBarItem later.

JakeLin · 2017-05-17T04:13:03Z

IBAnimatable/Animatable.swift

+      path.move(to: position)
+      path.addLine(to: CGPoint(x: xToMove, y: yToMove))
+
+      animatePosition(path: path, configuration: configuration, completion: completion)


Cool, before iOS 10, only Core Animation can apply custom timing.

JakeLin · 2017-05-17T04:16:33Z

IBAnimatable/Animatable.swift

+  }
+
+  /// This animation use timing function parameter.
+  public var isCubic: Bool {


Should it call something like doesSupportTimingFunction? I am not good at naming though 😂

JakeLin · 2017-05-17T04:20:21Z

IBAnimatable/AnimatableBarButtonItem.swift

@@ -41,6 +41,12 @@ open class AnimatableBarButtonItem: UIBarButtonItem, BarButtonItemDesignable, An
  @IBInspectable open var damping: CGFloat = CGFloat.nan
  @IBInspectable open var velocity: CGFloat = CGFloat.nan
  @IBInspectable open var force: CGFloat = CGFloat.nan
+  @IBInspectable open var _timingFunction: String = "" {


This one should not be open. It only is used in Interface Builder. Please have a look at the comment around #218 (comment) . We don't want the _ properties be used in programmatical APIs.

JakeLin · 2017-05-17T04:20:54Z

IBAnimatable/AnimatedTransitioning.swift

@@ -47,8 +47,7 @@ public extension AnimatedTransitioning {
        transition.subtype = subtype
      }
      transition.duration = self.transitionDuration(using: transitionContext)
-      // Use `EaseOutQubic` for system built-in transition animations. Thanks to @lexrus
-      transition.timingFunction = CAMediaTimingFunction(controlPoints: 0.215, 0.61, 0.355, 1)
+      transition.timingFunctionType = .easeOutCubic


JakeLin · 2017-05-17T04:21:32Z

IBAnimatable/TimingFunctionType.swift

+  case custom((x: Float, y: Float), (x: Float, y: Float))
+  case spring(damping: Float)
+
+  // from http://easings.net/


JakeLin · 2017-05-17T04:28:11Z

IBAnimatable/TimingFunctionType.swift

+
+@available(iOS 10.0, *)
+extension TimingFunctionType {
+  var cubicTimingParameters: UICubicTimingParameters {


Supper cool to support UIPropertyAnimator API.

JakeLin · 2017-05-17T04:36:39Z

@phimage thanks for such a great PR. I think PR is ready to go. Please have a look at this comment #478 (comment) for the _timingFunction. It should be internal like the other _ properties.

JakeLin · 2017-05-18T01:24:09Z

@phimage Well done 🎉🎉🎉🎉🎉🎉

Revert "Revert "Support timing function for animation. Fix #12" #no-p…

98f26ef

…ublic-changes"

phimage requested review from JakeLin and tbaranes May 11, 2017 06:29

phimage changed the title ~~Support timing function for animation. Fix #12 #13~~ [WIP] Support timing function for animation. Fix #12 #13 May 11, 2017

e-marchand added 2 commits May 11, 2017 09:02

In demo app select previously selected timing function

efda4ad

Fix moteBy and moveTo animation

44966c5

With TimingFunction position is animated using centre point

phimage changed the title ~~[WIP] Support timing function for animation. Fix #12 #13~~ Support timing function for animation. Fix #12 #13 May 11, 2017

e-marchand added 2 commits May 11, 2017 09:34

Update change log

ecf1bcb

Fix swiftlint warning about space

4ccffad

phimage mentioned this pull request May 15, 2017

Add ellipse mask type #481

Merged

tbaranes requested changes May 15, 2017

View reviewed changes

In demo app timing function button is enabled is animation is configu…

f041043

…rable by timing function Redesign back button and title for timing function picker controller Typo, comment on TimingFunctiontType

tbaranes requested changes May 16, 2017

View reviewed changes

Merge branch 'master' into revert-473-revert-456-feature/timingfunction

1b35921

tbaranes approved these changes May 16, 2017

View reviewed changes

JakeLin approved these changes May 17, 2017

View reviewed changes

Merge branch 'master' into revert-473-revert-456-feature/timingfunction

81c8658

Set internal _timingFunction variable

0a2b90d

phimage merged commit 91a8338 into master May 17, 2017

phimage deleted the revert-473-revert-456-feature/timingfunction branch May 17, 2017 08:09

phimage added this to the 5.0 milestone May 17, 2017


		internal extension CAAnimation {

		// conveniant setter, getter not implemented


		}

		@available(iOSApplicationExtension 10.0, *)

Support timing function for animation. Fix #12 #13 #478

Support timing function for animation. Fix #12 #13 #478

Conversation

phimage commented May 11, 2017 • edited

IBAnimatableBot commented May 11, 2017 • edited

tbaranes commented May 15, 2017

phimage commented May 15, 2017 • edited

tbaranes left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tbaranes commented May 15, 2017 • edited

phimage commented May 15, 2017 • edited

phimage commented May 15, 2017 • edited

SD10 commented May 15, 2017

tbaranes left a comment • edited

Choose a reason for hiding this comment

phimage commented May 16, 2017

tbaranes left a comment

Choose a reason for hiding this comment

JakeLin left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

JakeLin commented May 17, 2017

JakeLin commented May 18, 2017

phimage commented May 11, 2017 •

edited

IBAnimatableBot commented May 11, 2017 •

edited

phimage commented May 15, 2017 •

edited

tbaranes commented May 15, 2017 •

edited

phimage commented May 15, 2017 •

edited

phimage commented May 15, 2017 •

edited

tbaranes left a comment •

edited