wpf在page中如何切换page_Framer X 创建自定义页面切换组件

介绍

在这个教程中你会学习用很少量的代码创建自定义页面切换效果的组件，自定义之后你可以完全掌控页面之间的切换效果。另外，通过这个组件的建立，你也可以学习如何使用 Framer X 创建一个组件。

1.创建 Code Component

打开 Framer X，切换到 Code 栏，点击 New 按钮，新建代码组件，命名为 PageEffect，Framer X 会自动生成一份 PageEffect.tsx 文件，删除所有预置代码。

然后引入 React 和 framer X 库中的 Frame 和 Page 组件。

import * as React from "react"
import { Frame, Page } from "framer"

使用 map 方法创建页面并形成组件：

const pages = ["one", "two", "three", "four"]

export function PageEffect() {
    return (
        <Page width={"100%"} height={"100%"} overflow={"visible"}>
            {pages.map((title, index) => {
                return (
                    <Frame
                        size={"100%"}
                        backgroundColor="white"
                        borderRadius={12}
                    ></Frame>
                )
            })}
        </Page>
    )
}

这样基本组件就完成了，这时就可以在 Components 栏看到该组件，可以把它拖拽到设计中。

2 添加切换效果

引入 framer 中的 transform 组件为页面的切换添加效果。

import { Frame, Page,transform} from "framer"

在<Page>中增添 effect 项：

effect={info => {
    // 设置前一个页面，默认页面和下一个页面的 offset 分别为 -1、0 和 1
    const offset = info.normalizedOffset
    // 设置页面切换过程中的透明度变化
    const opacity = transform(offset, [-1, 0, 1], [0.5, 1, 0.5])
    // 设置缩放的变化:0.6 和 1 的过渡
    const scale = transform(offset, [-1, 0, 1], [0.6, 1, 0.6])

    return {
        opacity: opacity,
        scale: scale,
    }
}}

此时总的代码：

import * as React from "react"
import { Frame, Page, transform } from "framer"

// 使用 map 方法创建页面
const pages = ["one", "two", "three", "four"]

export function PageEffect() {
    return (
        <Page
            width={"100%"}
            height={"100%"}
            overflow={"visible"}
            effect={info => {
                // 设置前一个页面，默认页面和下一个页面的 offset 分别为 -1、0 和 1
                const offset = info.normalizedOffset
                // 设置页面切换过程中的透明度变化
                const opacity = transform(offset, [-1, 0, 1], [0.5, 1, 0.5])
                // 设置缩放的变化:0.6 和 1 的过渡
                const scale = transform(offset, [-1, 0, 1], [0.6, 1, 0.6])

                return {
                    opacity: opacity,
                    scale: scale,
                }
            }}
        >
            {pages.map((title, index) => {
                return (
                    <Frame
                        size={"100%"}
                        backgroundColor="white"
                        borderRadius={12}
                    ></Frame>
                )
            })}
        </Page>
    )
}

framer X_添加页面切换效果https://www.zhihu.com/video/1178995969911349248

此时效果如下：

3 设置 Gap

由上一步得到的结果可知：此时屏幕里只显示了当前页面，前一个和后一个完全没有显示，此时我们可以通过设置页面的 Gap 值来使前后页面出现在屏幕中。

另外，我们想要使 Gap 的值是组件中可自由改变的值，通过使用 frame 库中的addPropertyControls 和 ControlType 组件可以达到目的。

首先，引入 addPropertyControls 和 ControlType。

import { Frame, Page, transform,addPropertyControls,ControlType} from "framer"

然后，为 function 添加属性，并定义属性：

export function PageEffect(props) {
    const { gap } = props

在 <Page> 中设置 gap 的值，指向定义的属性：

gap={gap}

设置属性默认值&增添属性控制器内容：

// 设置默认值
PageEffect.defaultProps = {
    gap: 0,
}

// 增添属性控制器内容
addPropertyControls(PageEffect, {
    gap: {
        title: "Gap", //标题
        type: ControlType.Number, //类型：数字
        min: -1000, //最小值
        max: 2000, //最大值
        step: 1, //步进：1
        defaultValue: 0, //默认值
    },
})

总代码如下：

import * as React from "react"
import {
    Frame,
    Page,
    transform,
    addPropertyControls,
    ControlType,
} from "framer"

// 使用 map 方法创建页面
const pages = ["one", "two", "three", "four"]

export function PageEffect(props) {
    const { gap } = props

    return (
        <Page
            width={"100%"}
            height={"100%"}
            overflow={"visible"}
            gap={gap}
            effect={info => {
                // 设置前一个页面，默认页面和下一个页面的 offset 分别为 -1、0 和 1
                const offset = info.normalizedOffset
                // 设置页面切换过程中的透明度变化
                const opacity = transform(offset, [-1, 0, 1], [0.5, 1, 0.5])
                // 设置缩放的变化:0.6 和 1 的过渡
                const scale = transform(offset, [-1, 0, 1], [0.6, 1, 0.6])

                return {
                    opacity: opacity,
                    scale: scale,
                }
            }}
        >
            {pages.map((title, index) => {
                return (
                    <Frame
                        size={"100%"}
                        backgroundColor="white"
                        borderRadius={12}
                    ></Frame>
                )
            })}
        </Page>
    )
}

// 设置默认值
PageEffect.defaultProps = {
    gap: 0,
}

// 增添属性控制器内容
addPropertyControls(PageEffect, {
    gap: {
        title: "Gap", //标题
        type: ControlType.Number, //类型：数字
        min: -1000, //最小值
        max: 2000, //最大值
        step: 1, //步进：1
        defaultValue: 0, //默认值
    },
})

这样我们插入组件后就可以自由调整 gap 的值：

4 为页面插入内容

最后，我们可在每个卡片上插入内容，在 <Frame> 中插入 {title} 并引用对应样式来实现。

//设定对应样式
const style = {
    fontSize: 84,
    fontWeight: 100,
    color: "blue",
}

引用对应样式：

{pages.map((title, index) => {
    return (
        <Frame
            size={"100%"}
            backgroundColor="white"
            borderRadius={12}
            style={style}
        >
            {title}
        </Frame>
    )
})}

https://www.zhihu.com/video/1179067702461874176

完成！一共七十多行代码，完成了一个 Page Component~