SwiftUI-ReelsLayout 抖音

SwiftUI

字数统计: 970阅读时长: 5 min

 2024/03/20   Share

SwiftUI -ReelsLayout App

YouTube Link address:

效果图

类似于tiktok 播放页面, 滑动切换

AVKit UIViewControllerRepresentable
makeUIViewController updateUIViewController
OffsetKey: PreferenceKey
.preference .onPreferenceChange
playPause(:)

页面结构

HomeView

Scrollview

Overlay ( 其他控件不跟着 scrollView 滚动 )

点赞双击的红心(带偏移动画)

LazyVStack (记住是 LazyVStack)

ReelView

ReelView

ReelView …

CustomVideoPlayer

Overlay ( 界面具体元素 [ 点赞评论私信更多 ] )

onTapGesture(count: 2 …)

likedCounter数组 isLiked = true 触发点赞动画效果

onAppear

新建 player [ player = queue ]

AVPlayerLooper ( 循环播放 )

播放完成之后 player.seek(to: .zero) 重头开始

onDisappear

player = nil

overlay ( scrollView 界面上其他元素 [ Reels标题, )

标题 Reels

Camera 图标📷

按照页面page 样式, 竖屏滑动

ReelVIew 代码

//

// ReelView.swift

// ReelsLayout

//

// Created by 杨庆 on 2024/3/11.

//



import SwiftUI

import AVKit



/// Reel View

struct ReelView: View {
  @Binding var reel: Reel
  @Binding var likedCounter: [Like]
  var size: CGSize
  var safeArea: EdgeInsets

  /// View Properties
  @State private var player: AVPlayer?

  var body: some View {
    GeometryReader {
      let rect = $0.frame(in: .scrollView(axis: .vertical))
      /// Custom Video Player
      CustomVideoPlayer(player: $player)
      /// Offset Updates
        .preference(key: OffsetKey.self, value: rect)
        .onPreferenceChange(OffsetKey.self, perform: { value in
          playPause(value)
        })
        .overlay(alignment: .bottom) {
          ReelDetailsView(reel: reel)
        }
      /// Double Tap Like Animation
        .onTapGesture(count: 2, perform: { position in
          let id = UUID()
          likedCounter.append(.init(id: id, tappedRect: position, isAnimated: false))
          withAnimation(.snappy(duration: 1.2), completionCriteria: .logicallyComplete) {
            if let index = likedCounter.firstIndex(where: { $0.id == id }) {
              likedCounter[index].isAnimated = true
            }
          } completion: {
            /// Removing Like, Once it's Finished
            likedCounter.removeAll(where: { $0.id == id })
          }
          /// Liking the Reel
          reel.isLiked = true 
        })
      /// Creating Player
        .onAppear {
          print(safeArea.bottom)
          guard player == nil else { return }
          guard let bundleID = Bundle.main.path(forResource: reel.videoID, ofType: "mp4") else { return }
          let videoURL = URL(filePath: bundleID)
          player = AVPlayer(url: videoURL)
        }
      /// Clearing Player
        .onDisappear {
          print("onDisppear ----- ")
          player = nil
        }
    }
    .frame(width: size.width, height: size.height)
  }

   
  /// Play / Pause Action

  func playPause(_ rect: CGRect) {

    print("minY -----\(rect.minY)")
    if -rect.minY < (rect.height * 0.5) && rect.minY < (rect.height * 0.5) {
      player?.play()
    } else {
      player?.pause()
    }
    if rect.minY >= size.height || -rect.minY >= size.height {
      player?.seek(to: .zero)
    }
  }
  /// Reel Details & Controls
  @ViewBuilder
  func ReelDetailsView(reel: Reel) -> some View {
    HStack(alignment: .bottom, spacing: 10) {
      VStack(alignment: .leading, spacing: 8, content: {
        HStack(spacing: 10) {
          Image(systemName: "person.circle.fill")
            .font(.largeTitle)
          Text(reel.authorName)
            .font(.callout)
            .lineLimit(1)
        }
        .foregroundStyle(.white)
        Text("Lorem Ipsum is simply dummy text of the printing and typesetting industry")
          .font(.caption)
          .foregroundStyle(.secondary)
          .lineLimit(2)
          .clipped()
      })
      Spacer(minLength: 0)
      /// Controls Views
      VStack(spacing: 35) {
        Button("", systemImage: reel.isLiked ? "suit.heart.fill":"suit.heart") {
          self.reel.isLiked.toggle()
        }
        .symbolEffect(.bounce, value: reel.isLiked)
        .foregroundStyle(reel.isLiked ? .red : .white)
        Button("", systemImage: "message") { }
        Button("", systemImage: "paperplane") { }
        Button("", systemImage: "ellipsis") { }
      }
      .font(.title2)
      .foregroundStyle(.white)
    }
    .padding(.leading, 15)
    .padding(.trailing, 10)
    .padding(.bottom, safeArea.bottom + 15)
  }
}


#Preview(body: {
  ContentView()
})

播放逻辑算法

/// Play / Pause Action

func playPause(_ rect: CGRect) {

print("minY -----\(rect.minY)")

  if **-rect.minY < (rect.height \* 0.5) && rect.minY < (rect.height \* 0.5)** {

    player?.play()

  } else {

    player?.pause()

    }

if rect.minY >= size.height || -rect.minY >= size.height {

    player?.seek(to: .zero) // 重置到开始位置

   }

   

}

回顾页面结构

HomeView

Scrollview

Overlay ( 其他控件不跟着 scrollView 滚动 )

点赞双击的红心(带偏移动画)

LazyVStack (记住是 LazyVStack)

ReelView

ReelView

ReelView …

CustomVideoPlayer

Overlay ( 界面具体元素 [ 点赞评论私信更多 ] )

onTapGesture(count: 2 …)

likedCounter数组 isLiked = true 触发点赞动画效果

onAppear

新建 player [ player = queue ]

AVPlayerLooper ( 循环播放 )

播放完成之后 player.seek(to: .zero) 重头开始

onDisappear

player = nil

overlay ( scrollView 界面上其他元素 [ Reels标题, )

标题 Reels

Camera 图标📷

回顾 3 月 12 号

记不住的点

~~布局没什么问题~~

数据共享绑定有点迷糊 @Binding
通过OffsetKey来拿到scrollView 滚动的 size 变化控制播放▶️暂停 ⏸
点击屏幕双击计算添加一个 item 给 likeCounter; 动画效果给 likeCounter 动画添加一个counter.isLiked = true 动画完成之后移除这个 id 的 likeCounter
然后再 Home 页面的 scrollView 上面通过 Zstack 添加 forEach 的红心, 并给定frame , .animation , .offset(x: …, y: …), .offset(y:… )

首页滚动模式

 lazyVStack {
    ReelView()
    			.frame(maxWidth: .infinity) // 在 ScrollView 下面就能通过子控件确定宽度
    			.containerRelativeFrame(.vertical) // 自定义 frame
    	}
    }
.scrollTargetBehavior(.page) // 一页一个屏幕

以上就能确定基本翻页 Reel 的效果了.

原文作者：杨庆

原文链接：http://www.yqblog.cn/2024/03/20/ReelsLayout-%E6%8A%96%E9%9F%B3/

发表日期：March 20th 2024, 1:35:51 pm

更新日期：September 22nd 2024, 1:58:19 am