{"id":13743382,"url":"https://github.com/khanlou/SKBounceAnimation","last_synced_at":"2025-05-09T01:30:45.393Z","repository":{"id":4319634,"uuid":"5453821","full_name":"khanlou/SKBounceAnimation","owner":"khanlou","description":"A CAKeyframeAnimation subclass that lets you quickly and easily set a number of bounces, and start and end values, and creates an animation for you.","archived":false,"fork":false,"pushed_at":"2014-12-13T19:52:38.000Z","size":259,"stargazers_count":927,"open_issues_count":4,"forks_count":109,"subscribers_count":52,"default_branch":"master","last_synced_at":"2025-05-03T00:02:19.950Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Objective-C","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/khanlou.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2012-08-17T15:14:07.000Z","updated_at":"2025-04-10T06:51:09.000Z","dependencies_parsed_at":"2022-09-14T08:40:22.739Z","dependency_job_id":null,"html_url":"https://github.com/khanlou/SKBounceAnimation","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/khanlou%2FSKBounceAnimation","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/khanlou%2FSKBounceAnimation/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/khanlou%2FSKBounceAnimation/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/khanlou%2FSKBounceAnimation/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/khanlou","download_url":"https://codeload.github.com/khanlou/SKBounceAnimation/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252458471,"owners_count":21751045,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-03T05:00:45.631Z","updated_at":"2025-05-09T01:30:45.004Z","avatar_url":"https://github.com/khanlou.png","language":"Objective-C","readme":"# SKBounceAnimation\n\n`SKBounceAnimation` is a `CAKeyframeAnimation` subclass that creates an animation for you based on start and end values and a number of bounces. It’s based on the math and technology in this blogpost: [khanlou.com/2012/01/cakeyframeanimation-make-it-bounce/](http://khanlou.com/2012/01/cakeyframeanimation-make-it-bounce/) which in turn was based partially on Matt Gallagher’s work here: [cocoawithlove.com/2008/09/parametric-acceleration-curves-in-core.html](http://cocoawithlove.com/2008/09/parametric-acceleration-curves-in-core.html).\n\n## Usage\n\nBasic code is simple:\n\n\t\n\t\n\tNSString *keyPath = @\"position.y\";\n\tid finalValue = [NSNumber numberWithFloat:300];\n\t[view.layer setValue:finalValue forKeyPath:keyPath];\n\n\tSKBounceAnimation *bounceAnimation = [SKBounceAnimation animationWithKeyPath:keyPath];\n\tbounceAnimation.fromValue = [NSNumber numberWithFloat:view.center.x];\n\tbounceAnimation.toValue = finalValue;\n\tbounceAnimation.duration = 0.5f;\n\tbounceAnimation.numberOfBounces = 2;\n\n\t[view.layer addAnimation:bounceAnimation forKey:@\"someKey\"];\n\nWe set the value of our keypath to the final value, and then perform the animation. When the animation finishes, it is automatically removed from the layer, and the `finalValue` takes over. If you do not use `-(void)setValue:forKeyPath:`, the original value for the keyPath will take over and the animation will snap back to original location after the animation is over.\n\n## Math\n\nTo learn more about the math, check out the [blogpost](http://khanlou.com/2012/01/cakeyframeanimation-make-it-bounce/) and [the informational post](http://khanlou.com/2012/01/dampers-and-their-role-in-physical-models/) preceding it for exact details, but essentially the system behaves with oscillating exponential decay in the form of the equation: `x = Ae^(-αt)•cos(ωt) + B`.\n\nA is the difference between start and end values, B is the end value, α is determined by the number of frames required to get the exponential decay portion to close enough to 0, and ω is determined by the number of periods required to get the desired number of bounces.\n\n## Extras\n\n`shouldOvershoot` is a property that you can change. It defaults to `YES`; if you set it to `NO`, the animation will bounce as if it were hitting a wall, instead of overshooting the target value and bouncing back. It looks a lot like the Anvil effect in Keynote.\n\n`shake` is a property that controls the oscillation function. Setting it to `YES` lets you shake the element instead of moving it. To use it, set the `fromValue` to the maximum amount you want it to go to and `toValue` to its current location. It uses a sine wave for the oscillation instead of cosine, since it starts at 0 (i.e., the current location.)\n\n`stiffness` is a property that determines how stiff the \"spring\" component should be. Acceptable values are\n\n* `SKBounceAnimationStiffnessLight`\n* `SKBounceAnimationStiffnessMedium`\n* `SKBounceAnimationStiffnessHeavy`\n\nThe default is `SKBounceAnimationStiffnessMedium`.\n\n\n## Demo app\n\nThe demo app contains demos for several different animations that are supported by `SKBounceAnimation`.\n\n* One-axis animation: Using a keypath like `position.x`, we can animate along one axis.\n* Two-axis animation: Using a keypath like `position`, `SKBounceAnimation` will generate a path, and your layer will follow it.\n* Size: Using the `bounds` keypath, we can make the size increase. The center of the size increase is determined by `anchorPoint`, which can be moved. It defaults to the center of the layer\n* Color: I have no idea why anyone would want to bounce a color animation, but I was feeling whimsical, so I added support for this as well.\n* Scale: Using a `CATransform3D` struct and the `transform` keypath, we can scale objects. This is very useful to create an effect like UIAlerts bouncing in. The `anchorPoint` also judges how this effect happens.\n* Scale \u0026 Rotate: Using multiple CATransform3Ds on top of each other, we can do super weird effects like scale and rotating. They look really cool.\n* Rect: The last demo creates two `SKBounceAnimations` with two different `keyPath`s (`position` and `bounds`) but attaches them to the same layer. The effect looks like a `frame` animation.\n\n## Other notes\n\n`SKBounceAnimation` doesn’t support the `byValue` property. ","funding_links":[],"categories":["Objective-C  Stars 1000以内排名整理","etc"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkhanlou%2FSKBounceAnimation","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkhanlou%2FSKBounceAnimation","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkhanlou%2FSKBounceAnimation/lists"}