Distortion

Distortion 为你的作品带来类似广角镜头的失真效果,这种效果特别适合展现动感和戏剧性的作品。它能够为你的图像或视频添加独特的视觉冲击力,吸引观众的目光。无论是用于艺术创作还是商业广告,Distortion 都能让你的作品在视觉上更加出众且令人难忘。

拷贝组件

组件已拷贝

属性控制

Distortion
Component
Media

Image

Video

Image

Image

Size

Fill

Distortion
Sharpness
Blur
Animate

Appear

Transition

Spring

Distortion
Component
Media

Image

Video

Image

Image

Size

Fill

Distortion
Sharpness
Blur
Animate

Appear

Transition

Spring

Distortion
Component
Media

Image

Video

Image

Image

Size

Fill

Distortion
Sharpness
Blur
Animate

Appear

Transition

Spring

组件特性

图像 & 视频

组件支持图像或视频作为输入媒体。兼容 Framer 内置的媒体修饰器,允许对媒体进行调整。

滚动动画

组件能够监测视口状态,在媒体元素进入可视区域时触发动画,触发阈值可自定义。

滚动变换

组件可根据页面滚动进度动态调整动画状态,动画作用范围可通过参数控制。

目标动画

组件允许定义动画的最终状态。触发后,动画将过渡并保持在该状态。

亮色/暗色主题媒体

组件能针够对不同主题(亮色/暗色)配置独立的媒体内容,并根据当前主题动态切换。

自定义过渡

组件集成了 Framer 的过渡控制器。支持自定义缓动函数和弹性参数。

图像 & 视频

组件支持图像或视频作为输入媒体。兼容 Framer 内置的媒体修饰器,允许对媒体进行调整。

滚动动画

组件能够监测视口状态,在媒体元素进入可视区域时触发动画,触发阈值可自定义。

滚动变换

组件可根据页面滚动进度动态调整动画状态,动画作用范围可通过参数控制。

目标动画

组件允许定义动画的最终状态。触发后,动画将过渡并保持在该状态。

亮色/暗色主题媒体

组件能针够对不同主题(亮色/暗色)配置独立的媒体内容,并根据当前主题动态切换。

自定义过渡

组件集成了 Framer 的过渡控制器。支持自定义缓动函数和弹性参数。

图像 & 视频

组件支持图像或视频作为输入媒体。兼容 Framer 内置的媒体修饰器,允许对媒体进行调整。

滚动动画

组件能够监测视口状态,在媒体元素进入可视区域时触发动画,触发阈值可自定义。

滚动变换

组件可根据页面滚动进度动态调整动画状态,动画作用范围可通过参数控制。

目标动画

组件允许定义动画的最终状态。触发后,动画将过渡并保持在该状态。

亮色/暗色主题媒体

组件能针够对不同主题(亮色/暗色)配置独立的媒体内容,并根据当前主题动态切换。

自定义过渡

组件集成了 Framer 的过渡控制器。支持自定义缓动函数和弹性参数。

提示

Distortion 模拟了镜头失真的效果,当你将 Distortion 设置为正数时可以获得枕形畸变效果,而设置为负数则可以获得桶形畸变效果。此外,将 Size 设置为 Scale 可以获得更加明显的动画效果。

属性说明

Distortion (-0.2 - 1)

控制媒体的扭曲强度。较高的值会增加形变程度,使媒体内容呈现更强烈的透视效果,并从更远处进入画面。

Sharpness (1 - 10)

增强边缘扭曲效果。较高的值会在媒体四角产生更显著的形变,强化广角镜头般的视觉效果。

Blur (1 - 10)

模拟镜头焦距效果。增加此值会使画面模糊,可用于模拟失焦效果。

探索下一个效果

Crack

Crack Effect Cover.
Crack Effect Cover.
Crack Effect Cover.

Reveals cool WebGL Effects Components for Framer.