SwiftUI中动画Animation(一)隐式动画

隐式动画

隐士动画的基本使用(一个简单的点击放大效果)

Button("点击变大"){
                self.amount += 1
            }
            .foregroundColor(.white)
            .padding(30)
            .background(Color.black)
            .clipShape(Circle())
            .scaleEffect(amount)//缩放
            .blur(radius: amount-1)//模糊效果(动画效果触发让文字越来越模糊)
            .animation(Animation.default)//隐式动画

几中常用的动画模式


extension Animation {

    public static let `default`: Animation
}

@available(iOS 13.0, OSX 10.15, tvOS 13.0, watchOS 6.0, *)
extension Animation {

    public static func easeInOut(duration: Double) -> Animation

    public static var easeInOut: Animation { get }

    public static func easeIn(duration: Double) -> Animation

    public static var easeIn: Animation { get }

    public static func easeOut(duration: Double) -> Animation

    public static var easeOut: Animation { get }

    public static func linear(duration: Double) -> Animation

    public static var linear: Animation { get }

    public static func timingCurve(_ c0x: Double, _ c0y: Double, _ c1x: Double, _ c1y: Double, duration: Double = 0.35) -> Animation
}

添加循环自动播放动画效果


2020-05-29 12.52.00.gif
            Button("自定义"){
//                self.amount2 += 1
            }
            .foregroundColor(.white)
            .padding(30)
            .background(Color.red)
            .clipShape(Circle())
            .overlay(//描边 要结合clipshape一起使用
                Circle()//覆盖圆形
                    .stroke(Color.red,lineWidth: 1)
                    .scaleEffect(amount2)
                    .opacity(Double(2-amount2))
//                    .animation(Animation.easeInOut(duration: 3).repeatCount(5, autoreverses: false))//链式调用必须带Animation,autoreverses:自动反转
                .animation(Animation.easeOut(duration: 3).repeatForever(autoreverses: false))//链式调用必须带Animation,autoreverses:自动反转
            )
            .onAppear {//按钮出现的时候触发,改变数值触发动画效果
                    self.amount2 = 2
            }

注:练市调用 repeateForever等方法需要在前面声明调用Animation,否则会报错如下:

.easeOut(duration: 3).repeatForever(autoreverses: false
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。