美文网首页
SwiftUI 实现双击点赞

SwiftUI 实现双击点赞

作者: Renew全栈工程师 | 来源:发表于2021-03-19 01:23 被阅读0次

1.先实现心形

SwiftUI Shape 三句代码自绘 心形

2.再实现动画,先看效果

SwiftUI 双击点赞

3.源码

import SwiftUI

struct HeartView: View {
    
    public let id = UUID()
    
    public var hit:CGPoint = CGPoint()
    
    @State var isAnimation:Bool = false{
        didSet{
            if !isAnimation {
                DispatchQueue.main.asyncAfter(deadline: .now()+0.5, execute:{
                    withAnimation{
                        isAnimation = false
                    }
                })
            }
        }
    }
    
    var onHide: ((_ heart:HeartView)->Void)? = nil
    
    public var wh:CGFloat =  CGFloat.random(in: 30 ... 100){
        didSet{
            print(wh)
        }
    }
    
    var body: some View{
        HeartShape()
            .fill(Color.red)
            .frame(width: 100, height: 100)
            .rotationEffect(Angle(degrees: Int.random(in: -60 ... -30)))
            .scaleEffect(isAnimation ? 2:0)
            .opacity(isAnimation ? 0.6:0)
            .onAppear{
                withAnimation{
                    isAnimation = true
                }
                
                DispatchQueue.main.asyncAfter(deadline: .now()+0.5, execute:{
                    withAnimation{
                        isAnimation = false
                    }
                })
            }
    }
    
}

struct HeartShape : Shape {
    
    func path(in rect: CGRect) -> Path {
        var path = Path()
        
        path.addPath(Rectangle().path(in: rect))

        let circleRectLeft = CGRect(x: 0, y: -(rect.height / 2), width: rect.width, height: rect.height)
        
        path.addPath(Circle().path(in: circleRectLeft))
        
        let circleRectRight = CGRect(x: (rect.height / 2), y: 0, width: rect.width, height: rect.height)
        
        path.addPath(Circle().path(in: circleRectRight))
        
        return path
    }
}

struct ContentView: View {

    @State private var heartList:[HeartView] = []
    
    @State var hit:CGPoint  = CGPoint()
    
    var body: some View {
        
        ZStack{
            Rectangle()
                .fill(Color.white)
                .hitTest({ (p) -> Bool in
                    hit = p
                    return true
                })
                .frame(height: 500)
                .onTapGesture(count: 2, perform: {
                    var heart = HeartView(){ heart in
                        heartList.removeAll(where: { item in
                            heart.id == item.id
                        })
                    }
                    
                    heart.hit = hit
                    
                    heartList.append(heart)
                })
            
            
            ForEach(0..<heartList.count, id: \.self) { (index) -> AnyView in
                let heart =  heartList[index]
                
                return  withAnimation{
                    heart
                        .offset(x:heart.hit.x - (100 * 2),y:heart.hit.y - (100 * 2))
                        .eraseToAnyView()
                    
                }
            }
        }.frame(height: 800)
       
    }
}

强烈鄙视哪些收费文章!!!!

相关文章

网友评论

      本文标题:SwiftUI 实现双击点赞

      本文链接:https://www.haomeiwen.com/subject/nfoycltx.html