All Projects → aunnnn → Movingnumbersview

aunnnn / Movingnumbersview

Licence: mit
Moving numbers effect in SwiftUI

Programming Languages

swift
15916 projects

Projects that are alternatives of or similar to Movingnumbersview

Candyview
Implement any RecyclerView in just 1 Line. CandyView handles everything for you.
Stars: ✭ 15 (-91.43%)
Mutual labels:  library, view
Mindo
Generate mind maps easily in your android app.
Stars: ✭ 52 (-70.29%)
Mutual labels:  library, view
Fillingbutton
🔥Replace typical onLongClickListener with this library!
Stars: ✭ 31 (-82.29%)
Mutual labels:  library, view
Crab
JavaScript library for building user interfaces with Custom Elements, Shadow DOM and React like API
Stars: ✭ 22 (-87.43%)
Mutual labels:  library, view
Overflow Pager Indicator
Simple paging indicator widget with pager dataset ovewflow effect à la Instagram behavior
Stars: ✭ 136 (-22.29%)
Mutual labels:  library, view
Tabulate
Table Maker for Modern C++
Stars: ✭ 862 (+392.57%)
Mutual labels:  library, view
Speedview
Dynamic Speedometer and Gauge for Android. amazing, powerful, and multi shape ⚡️
Stars: ✭ 1,035 (+491.43%)
Mutual labels:  library, view
Bouncylayout
Make. It. Bounce.
Stars: ✭ 4,035 (+2205.71%)
Mutual labels:  library, view
Floatingtoast
Android library to create customizable floating animated toasts like in Clash Royale app
Stars: ✭ 86 (-50.86%)
Mutual labels:  library, view
Calendarview
Calendar View Library
Stars: ✭ 71 (-59.43%)
Mutual labels:  library, view
Popview Android
Pop animation with circular dust effect for any view updation
Stars: ✭ 487 (+178.29%)
Mutual labels:  library, view
Show Case Card View
Show case card view
Stars: ✭ 151 (-13.71%)
Mutual labels:  library, view
Stacklabel
🔥空祖家的堆叠标签(以下碎念:一开始起名字“StackLabel”没想太多结果被人吐槽Stack是整齐堆叠的意思...........好吧这是我的锅不过现在要改也来不及了,好用就行了...吧?
Stars: ✭ 471 (+169.14%)
Mutual labels:  view, label
Androidlibs
🔥正在成为史上最全分类 Android 开源大全~~~~(长期更新 Star 一下吧)
Stars: ✭ 7,148 (+3984.57%)
Mutual labels:  library, view
Weatherview
WeatherView is an Android Library let you make cool weather animations for your app
Stars: ✭ 426 (+143.43%)
Mutual labels:  library, view
Hhcustomcorner
Awesome library to customize corners of UIView and UIButton. Now you can customize each corner differently
Stars: ✭ 36 (-79.43%)
Mutual labels:  library, view
Goview
Goview is a lightweight, minimalist and idiomatic template library based on golang html/template for building Go web application.
Stars: ✭ 213 (+21.71%)
Mutual labels:  library, view
Incrementproductview
Interesting concept of products incrementation
Stars: ✭ 262 (+49.71%)
Mutual labels:  library, view
Dotsloaderview
Simple dots loader view
Stars: ✭ 63 (-64%)
Mutual labels:  library, view
Bounceview Android
Customizable bounce animation for any view like in Clash Royale app
Stars: ✭ 142 (-18.86%)
Mutual labels:  library, view

MovingNumbersView

Moving numbers effect in SwiftUI.

Demo

Custom element:

emojidemo

Also used in the Robinhood-like line plot library RHLinePlot.

Features ✨

  • Smooth digit transition
  • Custom digit view builder
  • Dynamic decimal places
  • Support integer (just set to 0 decimal place)
  • Support commas
  • Support negative numbers

Requirements

  • iOS 13, macOS 10.15
  • Swift 5.1
  • Xcode 11

Installation

Cocoapods

pod install MovingNumbersView

Swift Package Manager

Go to File → Swift Packages → Add Package Dependency then put the repo URL (https://github.com/aunnnn/MovingNumbersView.git).

Usage

Initialize it with number, numberOfDecimalPlaces, and trailing closure elementBuilder:

import MovingNumbersView

MovingNumbersView(
    number: 123.456,
    numberOfDecimalPlaces: 3) { str in
        // How to build each character
        Text(str)
            .font(.largeTitle)
}

To display whole numbers, just set numberOfDecimalPlaces to 0.

The elementBuilder: (String) -> some View will be used by the library to build each visual element such as digits, dots, and commas. You can return any View, so the text style is fully customizable.

Optional Parameters

Optional parameters are fixedWidth*, verticalDigitSpacing, and animationDuration. verticalDigitSpacing allows you to control the spacing between digits in the vertical digit stack, and animationDuration is the duration for the vertical digit stack to move up and down.

fixedWidth: CGFloat? is optional but important. It will give a fixed width to the label to give space for digit transitioning. Without it, when the last few digits are moving in and out, the label frame shrinks faster that the transition so you could see trailing digits getting cropped out:

notfixedwidth

Setting fixed width will prevent the frame to shrink, and makes the transition/animation effect looks better:

fixedwidth

This will also leading align the digits. With the default value (nil), the MovingNumbersView will shrink and expand at its own center, since its size depends on the number of current visual elements and make the transitioning weird. While this could be fixed by using extra VStack with leading alignment, the former cropping problem is still there.

P.S. Another way to solve it is to put a couple of invisible digit(s) at the end, so it has some extra space to transition out. It kind of work, but probably won't scale if multiple digits are gone simultaneously (like 1,234,567 -> 0).

Blurring out top and bottom edges

gradientdemo

To have the top and bottom edges look blurry, simply apply a gradient mask on the MovingNumbersView:

MovingNumbersView(...)
    .mask(LinearGradient(
        gradient: Gradient(stops: [
            Gradient.Stop(color: .clear, location: 0),
            Gradient.Stop(color: .black, location: 0.2),
            Gradient.Stop(color: .black, location: 0.8),
            Gradient.Stop(color: .clear, location: 1.0)]),
        startPoint: .top,
        endPoint: .bottom))

How it was done

Basically there are one view for each digit, comma, dot, and minus sign, all centered in a HStack by default. Check out VisualElementType enum.

Graph

To show a number, we move only the vertical digit stack up and down to the right offset. Try removing the mask and see it in action:

How

The digit is represented as 10-digit stack, and it's being moving up and down via VerticalShift geometry effect, which just offsets the digit stack by the current digit presented. (I believe the normal transform/offset might work too.)

The assigned ids are important. Each visual element is assigned a number relative to its significance. We use a multiple of 10s for digit, a negative multiple of 10s for decimal places, 0 for dot and 1 is for minus sign. Comma has the id of next digit plus 5.

For example, -1,234.56 -> ids = [1(-), 40, 35(,), 30, 20, 10, 0(.), -10, -20].

This scheme allows SwiftUI to calculate the right insertion/removal transitioning. Moving from 9 to 19 is moving from ids = [10("9")] to ids = [20("1"), 10("9")]. That is, we don't animate 9 to 1, but simply bring in a new 1.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].