详情页关注动效

视频展示：

关注.mp4 (190.65MB)

源文件：

头条动效.framerx.zip

代码展示：

关注动效部分Override

  1. import { Override, Data } from "framer"
  3. const data = Data({
  4.     isGetApi: false,
  5.     isOpen: false,
  6.     isListOpen: false,
  7. })
  8. //关注
  9. export function concern(): Override {
  10.     return {
  11.         onTap() {
  12.             ;(data.isOpen = true),
  13.                 setTimeout(() => {
  14.                     ;(data.isGetApi = true), (data.isListOpen = true)
  15.                 }, 2200)
  16.         },
  17.         visible: data.isGetApi ? false : true,
  18.         animate: data.isGetApi
  19.             ? {
  20.                   opacity: 0,
  21.               }
  22.             : {
  23.                   opacity: 1,
  24.               },
  25.         transition: {
  26.             duration: 0.1,
  27.         },
  28.     }
  29. }
  30. //关注文字
  32. export function concernFont(): Override {
  33.     return {
  34.         animate: data.isOpen ? { opacity: 0 } : { opacity: 1 },
  35.     }
  36. }
  37. //关注请求API-circle
  39. export function getApiCirlce(): Override {
  40.     return {
  41.         animate: data.isOpen ? { opacity: 1 } : { opacity: 0 },
  42.     }
  43. }
  44. //已关注
  46. export function concerned(): Override {
  47.     return {
  48.         onTap() {
  49.             setTimeout(() => {
  50.                 ;(data.isGetApi = false), (data.isListOpen = false)
  51.             }, 2200)
  52.             data.isOpen = false
  53.         },
  54.         animate: data.isGetApi
  55.             ? {
  56.                   opacity: 1,
  57.                   x: -38,
  58.               }
  59.             : {
  60.                   opacity: 0,
  61.                   x: 0,
  62.               },
  63.         transition: {
  64.             duration: 0.35,
  65.         },
  66.     }
  67. }
  68. //已关注关注文字
  70. export function concernedFont(): Override {
  71.     return {
  72.         animate: data.isOpen ? { opacity: 1 } : { opacity: 0 },
  73.     }
  74. }
  75. //已关注请求API-circle
  77. export function getApiCirlced(): Override {
  78.     return {
  79.         animate: data.isOpen ? { opacity: 0 } : { opacity: 1 },
  80.     }
  81. }
  82. //下拉箭头
  83. export function arrowGroup(): Override {
  84.     return {
  85.         onTap() {
  86.             data.isListOpen = !data.isListOpen
  87.         },
  88.         animate: data.isGetApi
  89.             ? {
  90.                   opacity: 1,
  91.               }
  92.             : {
  93.                   opacity: 0,
  94.               },
  95.     }
  96. }
  97. //箭头方向
  99. export function arrow(): Override {
  100.     return {
  101.         rotate: data.isListOpen ? 0 : 180,
  102.     }
  103. }
  104. //内容
  105. export function content(): Override {
  106.     const variants = {
  107.         open: {
  108.             y: 200,
  109.             transition: {
  110.                 duration: 0.35,
  111.             },
  112.         },
  113.         closed: {
  114.             y: 0,
  115.             transition: {
  116.                 duration: 0.25,
  117.             },
  118.         },
  119.     }
  120.     return {
  121.         initial: "closed",
  122.         animate: data.isListOpen ? "open" : "closed",
  123.         variants: variants,
  124.     }
  125. }

滚动显示动效 override

  1. import { Override, motionValue, Data } from "framer"
  3. //data
  5. const data = Data({
  6.     isScrollToUser: false,
  7. })
  8. const scrollY = motionValue(0)
  10. scrollY.onChange(point => {
  11.     console.log(point)
  12.     if (point < -120) {
  13.         data.isScrollToUser = true
  14.     } else {
  15.         data.isScrollToUser = false
  16.     }
  17. })
  19. export function Scroll(): Override {
  20.     return {
  21.         contentOffsetY: scrollY,
  22.     }
  23. }
  25. export function userInfo(): Override {
  26.     return {
  27.         animate: data.isScrollToUser ? { opacity: 1 } : { opacity: 0 },
  28.         transition:{
  29.             duration:0.15
  30.         }
  31.     }
  32. }
  33. export function Title(): Override {
  34.     return {
  35.         animate: data.isScrollToUser ? { opacity: 0 } : { opacity: 1 },
  36.         transition: {
  37.             duration: 0.15
  38.         }
  39.     }
  40. }

真实数据API调用部分 code

import * as React from "react"
import { Frame, addPropertyControls, ControlType, Stack } from "framer"
import { Close } from "./canvas"
import styled from "styled-components"
import { useState, useEffect } from "react"

//style

const Content = styled.div`
    width: 128px;
    height: 162px;
    overflow: visible;
    background-color: #ffffff;
    border-radius: 6px;
    padding-top:8px;
    padding-left:9px;
    padding-right:9px
`

const Photo = styled.div`
    width: 60px;
    height: 60px;
    overflow: visible;
    background-image:url(${props => props.background});
    background-size:100% 100%;  
    border-radius: 30px; 
    margin:0 auto;

`
const Name = styled.p`
    width: 110px;
    height: 16px;
    font-family: "PingFangSC-Regular", "PingFang SC", serif;
    color: #000000;
    font-size: 14px;
    letter-spacing: 0px;
    line-height: 1.2;
    font-weight: 590;
    text-align: center; 
    margin:0 auto;
    margin-top:6px;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;  
`

const Introduce = styled.p`
  width: 90px;
  height: 30px;
  font-family: "PingFangSC-Regular", "PingFang SC", serif;
  color:"#333333";
  font-size: 11px;
  letter-spacing: 0px;
  line-height: 1.4;
  font-weight: 400;
  text-align: center;
  margin:0 auto;
  margin-top:3px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;

`
const Concern = styled.div`
   color:white;
   width: 102px;
   height: 24px;
   overflow: visible;
   background-color:#f85959;
   border-radius: 4px;
   font-family: "PingFangSC-Regular", "PingFang SC", serif;
   font-size: 12px;
   letter-spacing: 0px;
   line-height: 24px;
   font-weight: 400;
   text-align:center;
   margin:0 auto;
   margin-top:6px;

`

export function CareList(props) {
    const { name, introduce, photo } = props
    // 从API中获取JSON
    const [data, setData] = useState(null)
    useEffect(() => {
        fetch("http://mock-api.com/0ZzR0mne.mock/care")
            .then(response => response.json())
            .then(data => {
                if (data.list) {
                    setData(data.list)
                }
            })
    }, [])
    //如果数据还没有返回值，则返回loading
    if (!data) return <Frame>Loading...</Frame>

    const { list = [] } = data
    const careLists = data.map((list, index) => {
        return (
            <Content key={index}>
                <Photo background={list.photo} />
                <Close right={4} top={4} />
                <Name> {list.name} </Name>
                <Introduce> {list.introduce} </Introduce>
                <Concern> 关注 </Concern>
            </Content>
        )
    })
    return (
        <Stack
            gap={8}
            distribution="start"
            direction="horizontal"
            height={props.height}
            paddingLeft={13}
        >
            {careLists}
        </Stack>
    )
}

CareList.defaultProps = {
    name: "中国电力报是个大啦啊",
    introduce: "全国电力行业唯一的官方报纸行业的龙头老大",
    photo:
        "https://cdn.dribbble.com/assets/global_design_survey_2019/header/jeroen-van-eerden-be3330933fbe57f9edcce62654c5a2c74e24a2e9a75a8c62be73f71df6bbd372.png",
}

// Learn more: https://framer.com/api/property-controls/
addPropertyControls(CareList, {
    photo: {
        title: "photo",
        type: ControlType.String,
        defaultValue:
            "https://cdn.dribbble.com/assets/global_design_survey_2019/header/jeroen-van-eerden-be3330933fbe57f9edcce62654c5a2c74e24a2e9a75a8c62be73f71df6bbd372.png",
    },
    name: {
        title: "name",
        type: ControlType.String,
        defaultValue: "中国电力报",
    },
    introduce: {
        title: "introduce",
        type: ControlType.String,
        defaultValue: "全国电力行业唯一的官方报纸行业的龙头老大",
    },
})

悬浮播放按钮

视频讲解

1.mp4 (148.04MB)

源文件

头条动效_悬浮按钮.framerx.zip

代码展示：

按钮悬浮部分Override

import { Override, Data, motionValue, useAnimation } from "framer"

const data = Data({
    isPlay: false,
    length: 0,
    isControlsListOpen: false,
    isRelease: 0,
})
//playButton 开始播放

export function PlayButton(props): Override {
    return {
        onTap() {
            setInterval(() => {
                data.length += 1
            }, 100)
            data.isPlay = true
        },
    }
}

//主Group
export function ButtonGroup(props): Override {
    const controls = useAnimation()
    return {
        drag: true,
        dragConstraints: {
            right: data.isControlsListOpen ? 162 : 309,
            left: 0,
            bottom: 198,
            top: -429,
        },
        dragMomentum: false,
        // pan
        onPanEnd(event, info) {
            const move = info.offset.x
            // console.log(move)
            if (move > 1) {
                data.isRelease = 3
            } else {
                data.isRelease = 0
            }
        },
        //tap
        onTap() {
            if (data.isRelease < 2) {
                // console.log("ok")
                data.isControlsListOpen = true
            }
        },

        //drag
        onDragEnd(event, info) {
            const positionX = info.point.x
            // console.log(positionX)
            const limitX = data.isControlsListOpen ? 1 : 0
            const limitY = data.isControlsListOpen ? 1 : 0
            if (positionX < 76) {
                controls.start({
                    x: 0,
                    transition: {
                        duration: 0.35,
                    },
                })
            } else if (positionX >= 76) {
                controls.start({
                    x: data.isControlsListOpen ? 170 : 309,
                    transition: {
                        duration: 0.35,
                    },
                })
            }
        },
        animate: controls,
        opacity: data.isPlay ? 1 : 0,
        width: data.isControlsListOpen ? 184 : 40,
        transition: {
            duration: 0.25,
        },
    }
}
//controlsList
export function controlsList(): Override {
    return {
        animate: data.isControlsListOpen ? { opacity: 1 } : { opacity: 0 },
        transition: {
            duration: 0.2,
            delay: 0.15,
        },
    }
}
//playMove

export function playMove(): Override {
    return {
        visible: data.isControlsListOpen ? false : true,
    }
}

//userPhoto

export function userPhoto(): Override {
    return {
        animate: data.isControlsListOpen ? { opacity: 1 } : { opacity: 0 },
        transition: {
            duration: 0.2,
        },
    }
}
//bg

export function bg(): Override {
    return {
        animate: data.isControlsListOpen ? { width: 184 } : { width: 40 },
    }
}
//closeButtonGroup

export function close(): Override {
    return {
        onTap() {
            data.isPlay = false
        },
    }
}
//中间的播放浪
export function TapFrame(props): Override {
    return {
        animate: {
            height: 2,
            originY: 0,
            transition: {
                duration: 0.45,
                flip: Infinity,
                delay: props.name,
            },
        },
    }
}
//进程圈

export function circle(props): Override {
    if (data.length < 360) {
        return {
            length: data.length,
        }
    } else {
        return {
            length: 360,
        }
    }
}