Question

我有一个看起来像这样的svg：

<svg id="baseSplashGradient" width="720px" height="1024px" viewBox="0 0 720 1024" version="1.1"
         xmlns="http://www.w3.org/2000/svg"
         xmlns:xlink="http://www.w3.org/1999/xlink">
        <defs>
            <linearGradient x1="41.1044918%" y1="0%" x2="50%" y2="101.663162%" id="linearGradient-1">
                <stop stop-color="#56CCF2" offset="0%"></stop>
                <stop stop-color="#2F80ED" offset="100%"></stop>
            </linearGradient>
        </defs>
    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <polygon id="left-background" fill="url(#linearGradient-1)"
                     points="0 0 439.837891 0 720 1024 0 1024"></polygon>
    </g>
</svg>

它形成一种三角形的形状。我试图弄清楚如何设置点数组的动画：

points="0 0 439.837891 0 720 1024 0 1024

看起来像这样：

points="0 0 720 0 720 1024 0 1024"

本质上，使形状为矩形。使用像translateX之类的东西，我不确定如何与实际的点交谈。

我可以移动整个svg：

var svg = $('#baseSplashGradient'),
    polygon = svg.find('polygon'),
    points = polygon.attr('points'),
    pointsArray = points.split(' ');

if (polygon.data('animating') === true) {
    //
} else {
    polygon.velocity({
        translateX: '200px'
    }, {
        duration: 500
    });
}

但这不是我想要完成的事情。任何建议将不胜感激！

Answer 1

目前您需要使用进度回调，并手动更改属性。当Velocity v2发布时，您应该能够直接将其设置为属性（免责声明：我是v2的首席开发人员）。

<android.support.design.widget.NavigationView
    android:id="@+id/nav_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:fitsSystemWindows="true"
    android:layout_marginEnd="-65dp"
    android:layout_marginRight="-65dp"
    app:menu="@menu/drawer_menu_chat"/>

当Velocity v2（目前是开发分支）发布时，您将能够更轻松地完成它：

detach("new_tmp")
attach(new.env(), name="new_tmp")
my_newenv <- as.environment("new_tmp")
source("C:/Users/tmp/tmp.R", local=my_newenv)
search()

xxx <- "this should not be overwritten"
y <- 10

my_newenv$printing_func(10) # the result should be 20!
print(my_newenv$xxx) 

# <<< R script imported using source() function  >>>
# >>>
# >>>
xxx <- "this overwrote"
printing_func <- function(xx){
  xx + y
  print("it works")
}

如何使用velocityjs为svg多边形点的位置设置动画？

1 个答案: