AnimationBackground

When you're creating UI in code, there are times when you want animated screens, and this library can help you with that. Use the default shaped views and customize them easily

AnimationBackground is a library that provides developers with screens with simple animation effects. You can include it in your project through the Swift Package Manager.

• Installation
• Usage
  • ABRainingView, ABRisingView
  • ABCheckboardView
  • ABBoundingView (how I develop ABBoundingView)
• Author
• License

Installation

The following URLs are available for inclusion in the Swift Package Manager.

https://github.com/mynameisjaehoon/AnimationBackground-Swift

Usage

As of 2022-02-19, two features are available.

1. ABRainingView: A screen that shows the user's registered image falling from the top of the view to the bottom, as if it's raining. You can register multiple images. The image moves faster and faster.
2. ABRisingView: This view shows the images registered by the user from the bottom to the top. You can register multiple images. The image moves faster and faster.
3. ABCheckboardView: This view shows one image registered by a user in a chessboard format. The image zooms out and in at small intervals.
4. ABBoundingView: This view shows the image on the screen when a user registers it. The image rotates and moves, and whenever it hits the boundaries of the screen, it shows the effect of moving in a different direction.

ABRainingView	ABRisingView	ABCheckboardView	ABBoundingView

ABRainingView, ABRisingView

The following steps are required to use ABRainingView and ABRisingView.

1. Create class instance
   When you create an instance, you can adjust the opacity of the image by passing a data value of 0 to 1 to the opacity parameter.
   

   let rainingView = ABRainingView(opacity: 0.5)
   let risingView = ABRisingView(opacity: 1.0)

2. Use the configureImages(images:) method to register the images to be used in the view
   

   rainView.configureImages(
       images: [
           UIImage(named: "swift-logo")!,
           UIImage(named: "python-logo")!,
           UIImage(named: "ruby-logo")!
       ]
   )

3. Activate the animation through the activate method.
   It's important to note that this needs to be done in viewDidLayoutSubviews because we need the size information of the views to run the animation and calculate the size of the image.

   override func viewDidLayoutSubviews() {
       rainView.activate()
   }

You can use methods to set the speed of the animation and the number of images to display.

There are five types of animation speeds.

1. AnimationSpeed.superSlow
2. AnimationSpeed.slow
3. AnimationSpeed.normal
4. AnimationSpeed.fast
5. AnimationSpeed.superFast

superSlow	slow	normal	fast	superFast

animationView.configureSpeed(to: .superFast) // set animation speed to 'superFast'
animationView.configureImageNumber(to: 50) // set image number to 50

ABCheckboardView

The following steps are required to use ABCheckboardView.

1. Create class instance
   You can simply create an instance of ABCheckboardView.

   let checkView = ABCheckboardView()

2. Use the configureImages(images:) method to register the images to be used in the view. Unlike ABRainingView and ABRisingView, only one image can be registered.
   

   checkView.configureImage(image: UIImage(named: "swift-logo")!)

3. Run the activate method to place the registered image in the view and animate it.
   It's important to note that this needs to be done in viewDidLayoutSubviews because we need the size information of the views to run the animation and calculate the size of the image.

   override func viewDidLayoutSubviews() {
       checkView.activate()
   }

ABBoundingView

The following steps are required to use ABBoundingView.

1. Create an instance of ABBoundingView. Initialize it with the image to use.

let boundingView = ABBoundingView(
    images: [
        UIImage(named: "swift-logo"),
        UIImage(named: "ruby-logo"),
        UIImage(named: "kotlin-logo"),
        UIImage(named: "dart-logo"),
        UIImage(named: "python-logo"),
        UIImage(named: "swiftui-logo"),
        UIImage(named: "java-logo"),
    ]
)

2. Then add it as a subview, give it the constraints you want, and that's it.

view.addSubView(boundingView)
// your constraint configuration...

You can also use ABBoundingConfiguration, a structure that provides configuration information for an ABBoundingView, to provide optional information at initialization time. You can set the movement speed, rotation speed, and size of the image.

Here's what each of ABBoundingConfiguration properties means.

• imageSize: literally the size of the image. default value is 100
• rotationSpeed: how many seconds it takes to make one rotation. defalut value is 8
• velocity: Indicates how many pixels per second to move. default value is 60

let boundingView = ABBoundingView(
    images: [
        UIImage(named: "swift-logo"),
        UIImage(named: "ruby-logo"),
        UIImage(named: "kotlin-logo"),
    ],
    option: ABBoundingConfiguration(
        imageSize: 120,
        rotationSpeed: 6,
        velocity: 100
    )
)

Author

• Jaehoon So
• E-mail: jhspacelover@naver.com

License

AnimationBackground is available under the MIT license. See the LICENSE file for more info.