评论

使用 Skyline Worklet 动画实现下拉页面放大头图

Worklet 给人一种 wxs 进阶版的感觉。

效果

思路

监听滚动事件,映射滚动距离至头图的放大比例。

实现

<!-- index.wxml -->

<scroll-view
    scroll-y
    class="scrollView"
    type="list"
    worklet:onscrollupdate="scrollViewOnScroll"
>
    <image 
        src="https://wx2.sinaimg.cn/large/007GYgpfly1hnfihmysbmj32yp281u0y.jpg"
        mode="aspectFill"
        class="headerImage"
    />
</scroll-view>


/** index.ts */

const { shared } = wx.worklet

/** 头图的放大高度 */
const headerImageHeight = shared(0)

Component({
    lifetimes: {
        attached() {
            this.applyAnimatedStyleToHeaderImage()
        }
    },

    methods: {
        /** 绑定由 worklet 驱动的样式到头图 */
        applyAnimatedStyleToHeaderImage() {
            this.applyAnimatedStyle(
                '.headerImage',
                () => {
                    'worklet'
                    const scale = (240 + headerImageHeight.value) / 240
                    return {transform: `scale(${Math.max(1, scale)})`}
                },
                {immediate: false}
            )
        },

        /** <scroll-view/> 的滚动回调 */
        scrollViewOnScroll(event: any) {
            'worklet'
            headerImageHeight.value -= event?.detail?.deltaY
        }
    }
})


/* index.wxss */

.scrollView {
   width: 100vw; 
   height: 100vh;
}


.headerImage {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
}
最后一次编辑于  07-07  
点赞 1
收藏
评论
登录 后发表内容