Giter Club home page Giter Club logo

Comments (6)

phimage avatar phimage commented on May 15, 2024 3

How about adding in Animatable

  /**
   Animation force (default value should be CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut))
   */
  var timingFunction: CAMediaTimingFunction { get set }

and to Animatable classes something like that

  @IBInspectable open var _timingFunction: String = kCAMediaTimingFunctionEaseInEaseOut {
    didSet {
      timingFunction = CAMediaTimingFunction(name: _timingFunction)
    }
  }
  open var timingFunction: CAMediaTimingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)

and in AnimationConfiguration

  let timingFunction: CAMediaTimingFunction

Instead of CAMediaTimingFunction we can have our own type TimingFunctionType enum or class which provide a CAMediaTimingFunction
So we can parse the string for custom CAMediaTimingFunction types
Wrapping allow providing optionnaly also multiple CAMediaTimingFunction for animation which requires multiples ones

from ibanimatable.

phimage avatar phimage commented on May 15, 2024 2

I will make the first move today
Create the feature branch and the enum, modify the Animatable classes, use enum when possible
Have already done the code yesterday, need some tests

I will add #12 to where I have questions

from ibanimatable.

JakeLin avatar JakeLin commented on May 15, 2024 1

@phimage Thanks for posting your idea. This is a useful feature. In one of my app, I slide a panel up and down. And I should use easeInEaseOut instead of Spring because using Spring will have a gap at the bottom (when bouncing) for a short period.

timingFunction property

I like your idea to have inspectable property timingFunction 👍. As you said, we may have our enum like TimingFunctionType. I can see two benefits of it.

Firstly, we can support more timing functions than linear, easeIn, easeOut, easeInEaseOut or easeOutEaseIn. We can have pre-defined timing functions like EaseOutQubic (CAMediaTimingFunction(controlPoints: 0.215, 0.61, 0.355, 1)).

Secondly, we can translate them into Core Animation or UIView Animation, In IBAnimatable, some of our animation uses Core Animation, and some use UIView Animation. In Core Animation, we use CAMediaTimingFunction. In UIView Animation, we use UIViewAnimationOptions. We need to provide a single enum and translate it into different timing function for Core Animation or UIView Animation.

Default value for timingFunction

For the default value for timingFunction, we may not able to set the default value to kCAMediaTimingFunctionEaseInEaseOut. Because timing function animation and Spring animation are conflicted each other. It means if we use timing function, we can't use Spring. iOS 10 introduced UIViewPropertyAnimator, we may be able to use both together but not at the same time. Therefore, we may treat timingFunction as a flag. If the user sets the animationType and timingFunction, then we use timing function to control the animation. If the user sets the animationType but not timingFunction, then we use damping, velocity and force for Spring animation as the current implementation.

timingFunction animation in code.

Adding timingFunction property is a great approach for support animation with timing function in Interface Builder. But we still need to provide nice programmatical API for using it in code. I don't know the exact solution yet, we may need to add new overload methods for Animatable.animate() and AnimationPromise.then(). We may need to spend some time to find the solution.

I think this is a great feature and do you think we should set it as the theme for release 5? Once we have it, we ship version 5.

@tbaranes can you also have a look at @phimage 's proposal?

@lastMove if you have time, can you have a look and provide some advice on timingFunction animation in code? It will be a great extension for your promise-like animation API.

from ibanimatable.

phimage avatar phimage commented on May 15, 2024 1

branch feature/timingfunction
https://github.com/IBAnimatable/IBAnimatable/tree/feature/timingfunction
https://github.com/IBAnimatable/IBAnimatable/compare/feature/timingfunction?expand=1

See all #12 in code for the question and work to do
Currently default value for animation is not well managed. There is a none case but I think about putting nil instead, depending on IBAnimatable philosophy. If none, when animating, default value must be used (not implemented)

from ibanimatable.

JakeLin avatar JakeLin commented on May 15, 2024

@phimage great start 👍 Do you think we can create a PR like [WIP] Support timing function for animation? then we can make comments on the PR.

I think in IBAnimatable we use none for enums and nil for String value which maps to none case like MaskType and AnimationType.

If timingFunctionType is none, should we use the Spring animation as what we have already? If it is .default then use default timing?

from ibanimatable.

phimage avatar phimage commented on May 15, 2024

PR #456 has been created
I will not have time this weekend to do more, so everybody could work on

from ibanimatable.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.