PAG(动画播放)

大约 3 分钟

PAG(动画播放)

类Lottie播放动画的组件

组件用法open in new window

需要在宿主端实现adapter

可参考：

属性

支持所有基础属性，此外还支持：

src 微信小程序实现中

设置PAGView的源文件路径，支持URL或本地文件路径

参数描述类型
src源文件路径String

repeatCount 微信小程序实现中

设置动画重复次数，默认值为 1，表示动画仅播放一次。0 表示动画将无限次播放

参数描述类型
repeatCount动画重复次数Int

scaleMode 微信小程序实现中

设置 PAG 内容在视图中的缩放模式，对齐 libpag 的 PAGScaleMode，控制动画如何适配容器尺寸。

可选值如下（括号为底层对应的数值，来自 libpag，便于在自定义 adapter 中透传）：

  • NONE (0): 不缩放，使用内容原始大小，容器剩余区域将留空。
  • STRETCH (1): 拉伸填充容器，不保持宽高比，可能产生拉伸变形。
  • LETTER_BOX (2): 等比缩放以完整显示内容，保持宽高比，可能在两侧留黑边（默认）。
  • ZOOM (3): 等比缩放以填满容器，保持宽高比，但内容可能被裁剪。
参数描述类型
scaleMode缩放模式PAGScaleMode

autoPlay 微信小程序实现中

设置是否自动播放，默认值为 true

参数描述类型
play是否自动播放Boolean

replaceLayerContentsH5实现中 微信小程序实现中

替换当前 PAG 资源中的图像图层信息，需要传入PAGReplaceItem类型参数

PAGReplaceItem

成员描述类型
type替换类型 0 文本 1 图片Int
layerNamelayerName & layerIndex 图层选择方式，根据名称或者顺序，二选一String
layerIndexlayerName & layerIndex 图层选择方式，根据名称或者顺序，二选一Int
text文本替换时指定String
imageFilePath图片替换文件路径String
imageFileAsset图片替换Asset资源路径String
imageViewRef图片替换同页面下其他 View 的 nativeRefString
imageFilePathMemoryCacheModule.get(key) 可获得 bitmap 的 keyString

注：图片替换时imageFilePath、imageFileAsset、imageFileAsset、imageFilePath指定其一

@Page("demo_page")
internal class TestPage : BasePager() {
    override fun body(): ViewBuilder {
        return {
            attr {
                allCenter()
            }
            PAG {
                attr {
                    size(pagerData.pageViewWidth, 200f)
                    src(ImageUri.pageAssets("user_avatar.pag"))
                    repeatCount(0)
                }
            }
            PAG {
                attr {
                    size(pagerData.pageViewWidth, 200f)
                    src(ImageUri.pageAssets("user_avatar.pag"))
                    repeatCount(0)
                    replaceLayerContents(
                        PAGReplaceItem(
                            PAGReplaceItem.TYPE_TEXT,
                            layerName = "text_user_note",
                            text = "Kuikly!"
                        ),
                        PAGReplaceItem(
                            PAGReplaceItem.TYPE_IMAGE,
                            layerName = "img_user_avatar",
                            imageFileAsset = ImageUri.pageAssets("user_portrait.png").toUrl(getPager().pageName)
                        ),
                    )
                }
            }
        }
    }
}



















 
 
 
 
 
 
 
 
 
 
 
 





事件

支持所有基础事件，此外还支持：

loadFailure 微信小程序实现中

设置加载失败时的事件回调

animationStart 微信小程序实现中

设置动画开始时的事件回调

animationEnd 微信小程序实现中

设置动画结束时的事件回调

animationCancel 微信小程序实现中

设置动画取消时的事件回调

animationRepeat 微信小程序实现中

设置动画重复时的事件回调

方法

play 微信小程序实现中

设置动画重复时的事件回调播放动画（autoPlay属性为true时不需要手动调用该接口）

stop 微信小程序实现中

停止动画