模仿唱吧app背景渐变动画 iOS

# Lottie for iOS, macOS (and [Android](https://github.com/airbnb/lottie-android) and [React Native](https://github.com/airbnb/lottie-react-native)) ### Table of Contents - [Introduction](#introduction) - [Installing Lottie](#installing-lottie) - [iOS Sample App](#ios-sample-app) - [macOS Sample App](#macos-sample-app) - [Objective C Examples](#objective-c-examples) - [Swift Examples](#swift-examples) - [Debugging Lottie](#debugging) - [iOS View Controller Transitioning](#ios-view-controller-transitioning) - [Changing Animations At Runtime](#changing-animations-at-runtime) - [Animated Controls and Switches](#animated-controls-and-switches) - [Adding Subviews to Animation](#adding-views-to-an-animation-at-runtime) - [Supported After Effects Features](#supported-after-effects-features) - [Currently Unsupported After Effects Features](#currently-unsupported-after-effects-features) - [Community Contributions](#community-contributions) - [Alternatives](#alternatives) - [Why is it called Lottie?](#why-is-it-called-lottie) - [Contributing](#contributing) - [Issues or feature requests?](#issues-or-feature-requests) ## Introduction Lottie is a mobile library for Android and iOS that parses [Adobe After Effects](http://www.adobe.com/products/aftereffects.html) animations exported as json with [bodymovin](https://github.com/bodymovin/bodymovin) and renders the vector animations natively on mobile and through React Native! For the first time, designers can create **and ship** beautiful animations without an engineer painstakingly recreating it by hand. Since the animation is backed by JSON they are extremely small in size but can be large in complexity! Animations can be played, resized, looped, sped up, slowed down, reversed, and even interactively scrubbed. Lottie can play or loop just a portion of the animation as well, the possibilities are endless! Animations can even be ***changed at runtime*** in various ways! Change the color, position or any keyframable value! Lottie also supports native UIViewController Transitions out of the box! Here is just a small sampling of the power of Lottie     ## Installing Lottie ### Github Repo You can pull the [Lottie Github Repo](https://github.com/airbnb/lottie-ios/) and include the Lottie.xcodeproj to build a dynamic or static library. ### Cocoapods Get [Cocoapods](https://cocoapods.org/) Add the pod to your podfile ``` pod 'lottie-ios' ``` run ``` pod install ``` After installing the cocoapod into your project import Lottie with Objective C `#import <Lottie/Lottie.h>` Swift `import Lottie` ### Carthage Get [Carthage](https://github.com/Carthage/Carthage) Add Lottie to your Cartfile ``` github "airbnb/lottie-ios" "master" ``` run ``` carthage update ``` In your application targets “General” tab under the “Linked Frameworks and Libraries” section, drag and drop lottie-ios.framework from the Carthage/Build/iOS directory that `carthage update` produced. ## iOS Sample App Clone this repo and try out [the Sample App](https://github.com/airbnb/lottie-ios/tree/master/Example) The repo can build a macOS Example and an iOS Example The iOS Example App demos several of the features of Lottie   The animation Explorer allows you to scrub, play, loop, and resize animations. Animations can be loaded from the app bundle or from [Lottie Files](http://www.lottiefiles.com) using the built in QR Code reader. ## macOS Sample App Clone this repo and try out [the Sample App](https://github.com/airbnb/lottie-ios/tree/master/Example) The repo can build a macOS Example and an iOS Example  The Lottie Viewer for macOS allows you to drag and drop JSON files to open, play, scrub and loop animations. This app is backed by the same animation code as the iOS app, so you will get an accurate representation of Mac and iOS animations. ## Objective C Examples Lottie animations can be loaded from bundled JSON or from a URL To bundle JSON just add it and any images that the animation requires to your target in xcode. ```objective-c LOTAnimationView *animation = [LOTAnimationView animationNamed:@"Lottie"]; [self.view addSubview:animation]; [animation playWithCompletion:^(BOOL animationFinished) { // Do Something }]; ``` If you are working with multiple bundles you can use. ```objective-c LOTAnimationView *animation = [LOTAnimationView animationNamed:@"Lottie" inBundle:[NSBundle YOUR_BUNDLE]]; [self.view addSubview:animation]; [animation playWithCompletion:^(BOOL animationFinished) { // Do Something }]; ``` Or you can load it programmatically from a NSURL ```objective-c LOTAnimationView *animation = [[LOTAnimationView alloc] initWithContentsOfURL:[NSURL URLWithString:URL]]; [self.view addSubview:animation]; ``` Lottie supports the iOS `UIViewContentModes` aspectFit, aspectFill and scaleFill You can also set the animation progress interactively. ```objective-c CGPoint translation = [gesture getTranslationInView:self.view]; CGFloat progress = translation.y / self.view.bounds.size.height; animationView.animationProgress = progress; ``` Or you can play just a portion of the animation: ```objective-c [lottieAnimation playFromProgress:0.25 toProgress:0.5 withCompletion:^(BOOL animationFinished) { // Do Something }]; ``` ## Swift Examples Lottie animations can be loaded from bundled JSON or from a URL To bundle JSON just add it and any images that the animation requires to your target in xcode. ```swift let animationView = LOTAnimationView(name: "LottieLogo") self.view.addSubview(animationView) animationView.play{ (finished) in // Do Something } ``` If your animation is in another bundle you can use ```swift let animationView = LOTAnimationView(name: "LottieLogo" bundle:yourBundle) self.view.addSubview(animationView) animationView.play() ``` Or you can load it asynchronously from a URL ```swift let animationView = LOTAnimationView(contentsOf: WebURL) self.view.addSubview(animationView) animationView.play() ``` You can also set the animation progress interactively. ```swift let translation = gesture.getTranslationInView(self.view) let progress = translation.y / self.view.bounds.size.height; animationView.animationProgress = progress ``` Or you can play just a portion of the animation: ```swift animationView.play(fromProgress: 0.25, toProgress: 0.5, withCompletion: nil) ``` ## iOS View Controller Transitioning Lottie comes with a `UIViewController` animation-controller for making custom viewController transitions!   Just become the delegate for a transition ```objective-c - (void)_showTransitionA { ToAnimationViewController *vc = [[ToAnimationViewController alloc] init]; vc.transitioningDelegate = self; [self presentViewController:vc animated:YES completion:NULL]; } ``` And implement the delegate methods with a `LOTAnimationTransitionController` ```objective-c #pragma mark -- View Controller Transitioning - (id<UIViewControllerAnimatedTransitioning>)animationControllerForPresentedController:(UIViewController *)presented presentingController:(UIViewController *)presenting sourceController:(UIViewController *)source { LOTAnimationTransitionController *animationController = [[LOTAnimationTransitionController alloc] initWithAnimationNamed:@"vcTransition1" fromLayerNamed:@"outLayer" toLayerNamed:@"inLayer" applyAnimationTransform:NO]; return animationController; } - (id<UIViewControllerAnimatedTransitioning>)animationControllerForDismissedController:(UIViewController *)dismissed { LOTAnimationTransitionController *animationController = [[LOTAnimationTransitionController alloc] initWithAnimationNamed:@"vcTransit