标签: framerjs

有没有人能将Framer X原型导出到可消耗RN的JSX？我想要的只是导出使用Framer制作的UI原型和动画，因此我可以使用RN来实现逻辑。

我目前的倾向是为Framer中的每个组件打开TSX代码，并通过必要的更改将该代码复制粘贴到我的RN项目中。似乎理想地应该做的工作还很多？我还怀疑这样做对保留Framer中编码的动画没有帮助吗？

我的设计团队使用摩擦和张力为我们提供动画参数.例如:

有弹簧影响(280张力和20.5摩擦力)超过0.3秒

不幸的是,我总是猜到这些值转换成了什么,并且眼球,如果看起来很接近,我发送它并批准它.但是,使用不同的值不断构建项目所需的时间非常耗时.必须有一个更简单的方法.

我在Github上发现了Framer,这让我相信阻尼可以这样计算:

let damping: CGFloat = 20.5 / (2 * (1 * 280)).squareRoot()

但是,我似乎无法弄清楚如何根据摩擦力和张力来计算速度.有没有更简单的方法来节省这个开发人员宝贵的时间？

动画示例:

UIView.animate(withDuration: 0.3, delay: 0, usingSpringWithDamping: damping,
                       initialSpringVelocity: ???, options: .curveEaseIn, animations: { // Do Stuff })

我正在使用成帧器运动在我的项目中创建滑动交互。我试图做到这一点，以便当用户拖动完孩子后，它会“弹回”到设定位置。

我从文档中看到，您可以使用弹簧来设置运动值的动画：const y = useSpring(x, { damping: 10 })，但我想我做得不正确？这是我的代码：

export default function SwipeContainer(props) {
  const x = useMotionValue(0);
  const m = useSpring(x, { damping: 10 });

  const handleDragEnd = (evt) => {
    console.log(evt);
    m.set(200);
  }

  return (
    <div className={styles.swipeContainer}>
      <motion.div
        style= {{ x, m }}
        className={styles.motionDiv}
        drag="x"
        onDragEnd={handleDragEnd}
      >
        {props.children}
      </motion.div>
    </div>
  );

}

我期望当 DragEnd 事件发生时，孩子将动画到 x:200，但这并没有发生。我是否设置了错误的值，或者可能是我将运动值应用到motion.div 的方式？

在 Framer Motion 中，我试图让两种颜色平滑地生成动画。颜色为红色“hsl(0, 100, 50)”和蓝色“hsl(240, 100, 50)”。不幸的是，动画正在经历色轮，在橙色、黄色、绿色、青色等处停下来。如何让它切换“方向”并从红色、紫色、蓝色平滑过渡？

我有一个原型,从Sketch导入,有多个640x1136的画板.但是当我在Framer中运行它时,我希望它适合所有设备.现在它只适用于iPhone 5分辨率.为了让原型在所有设备上运行,我需要做什么？

我尝试使每个画板变大,内容居中,然后跑Framer.Device.fullScreen = true,但比例仍然关闭.有没有办法使用百分比而不是静态像素位置,以便视图相应地适合每个设备？

附件是6+(不适合)的样子的截图,以及5(适合)的样子.

如何使用转换配置为从 0 到 100 的纯数字设置动画？

<motion.div>
  {num}
</motion.div>

我一直遇到同样的问题。我正在为一家理发店制作一个网站，我正在尝试使用 google api 将事件添加到 google 日历中。我安装了googleapis和framer，但它一直说找不到framer模块。我什至卸载了framer并重新安装了它，但它仍然无法工作。当我使用以下代码时出现错误：

const {google} = require('googleapis');

错误信息：

Uncaught Error: Cannot find module './framer'
    at webpackEmptyContext (protocol sync:2)
    at Array.map (<anonymous>)
    at Object../node_modules/http2/lib/protocol/index.js (index.js:46)
    at __webpack_require__ (bootstrap:856)
    at fn (bootstrap:150)
    at Object.<anonymous> (http.js:136)
    at Object../node_modules/http2/lib/http.js (http.js:1262)
    at __webpack_require__ (bootstrap:856)
    at fn (bootstrap:150)
    at Object../node_modules/http2/lib/index.js (index.js:18)
    at __webpack_require__ (bootstrap:856)
    at fn (bootstrap:150)
    at Object.<anonymous> (http2.js:16)
    at Object../node_modules/googleapis-common/build/src/http2.js (http2.js:249)
    at __webpack_require__ (bootstrap:856)
    at fn (bootstrap:150)
    at Object.<anonymous> (apirequest.js:23)
    at Object../node_modules/googleapis-common/build/src/apirequest.js (apirequest.js:304)
    at __webpack_require__ (bootstrap:856)
    at fn (bootstrap:150)
    at Object../node_modules/googleapis-common/build/src/index.js …

在使用Framer Motion API在我的网站上创建交互和动画时，我找不到如何使用它来在屏幕上显示某些内容时触发动画。

例如，这个 SVG 绘制正确，但 Framer 不会等待元素出现在视口上并在加载站点后立即触发它：

import React, { Component } from 'react'
import { motion } from "framer-motion";

class IsometricScreen extends Component {

    constructor() {
        super()
        this.icon = {
            hidden: { pathLength: 0 },
            visible: { pathLength: 1 }
        }
    }

    render() {
        return (
            <motion.svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 1000" className="svg-mobile">
                <motion.path
                    d="M418,988.93H82c-39.76,0-72-32.24-72-72V83.07c0-39.76,32.24-72,72-72h336c39.76,0,72,32.24,72,72v833.86
                    C490,956.69,457.76,988.93,418,988.93z"
                    variants={this.icon}
                    initial="hidden"
                    animate="visible"
                    transition={{
                        default: { duration: 2, ease: "easeInOut" }
                    }}
                />
            </motion.svg>
        )
    }
}

export default IsometricScreen …

我目前面临这个问题，尽管我的比例在悬停时触发，但我的动画拒绝工作。

我浏览了文档，但仍然无法弄清楚。我错过了什么？帮助！

这是我的代码和来自浏览器的警告：

            import { motion } from "framer-motion";

            <motion.div className="heart-overlay"

                whileHover={{
                    animate: {x: 500},
                    scale: 1.2,
                    transition: { ease: "easeOut", duration: 2 },
                }}>

                <div className="heart-top">
                    <Img className="heart-default" src={heart_default_top} />
                </div>
                <div className="heart-bot">
                    <Img className="heart-default" src={heart_default_bot} />
                </div>
            </motion.div>

我是framer.js的新手,我正在关注一本名为http://coffeescript-for-framerjs.com/#buy的书.

fruits[1].toUpperCase() 它运作正常

fruits.toUpperCase()

在书中,它的果实不是水果,我试过两个但是得到错误

现在我知道toUpperCase()是一个字符串方法,所以它不适用于Array.但那时书究竟在说什么呢.