Question

我有一个包含两个主要元素的HTML页面。一个是silverlight地图（带有动画图钉），另一个是jQuery动画。

当silverlight地图包含大量图钉时，jQuery动画非常不稳定。有没有办法让Silverlight减少资源占用并让jQuery动画具有更高的优先级？

Answer 1

您可以通过将MaxFrameRate参数添加到object标记来限制Silverlight应用程序的帧速率： -

<object ...>
    ...
    <param name="maxframerate" value="15 />
</object>

这可以释放CPU来处理JQuery动画。

Answer 2

我有一个自定义Map控件，它是Silverlight Bing地图控件的包装器。我从网络服务中检索有关车辆位置的数据。然后我将另一个自定义控件添加到每个车辆的地图图层中......就像这样：

    VehicleMarker vehicleMarker = new VehicleMarker(marker);
    markerLayer.AddChild(vehicleMarker, new Location(vehicleMarker.Location.Latitude, vehicleMarker.Location.Longitude));

'VehicleMarker'类有这种风格：

<Style x:Name="VehicleMarkerStyle" TargetType="Controls:VehicleMarker" >
        <Setter Property="RenderTransformOrigin" Value="0.5,0.5" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Controls:VehicleMarker" >
                    <Grid>
                        <Grid.RenderTransform>
                            <TransformGroup>
                                <ScaleTransform x:Name="ScaleTransform" ScaleX="1" ScaleY="1" />
                                <TranslateTransform x:Name="TranslateTransform" X="0" Y="0"/>
                            </TransformGroup>
                        </Grid.RenderTransform>
                        <Image Source="{TemplateBinding IconUrl}" Width="30" Height="30" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

我已经覆盖了'VehicleMarker'上的'OnApplyTemplate'方法，这样一旦应用了模板，动画就会在适当的位置添加到控件中：

        TranslateTransform translateTransform = new TranslateTransform();
        ScaleTransform scaleTransform = new ScaleTransform();
        TransformGroup transformGroup = new TransformGroup();
        transformGroup.Children.Add(translateTransform);
        transformGroup.Children.Add(scaleTransform);
        this.RenderTransform = transformGroup; 
        this.RenderTransformOrigin = new Point(0.5, 0.5);

        var storyboard = new Storyboard();
        storyboard.AutoReverse = true;
        storyboard.RepeatBehavior = RepeatBehavior.Forever;
        storyboard.Duration = new Duration(new TimeSpan(0,0,0,0,500));

        var animation = new DoubleAnimation();
        animation.From = translateTransform.Y;
        animation.To = translateTransform.Y-5;
        storyboard.Children.Add(animation);
        Storyboard.SetTargetProperty(animation, new PropertyPath("(UIElement.RenderTransform).(TransformGroup.Children)[0].(TranslateTransform.Y)"));
        Storyboard.SetTarget(animation, this);

        if (!Resources.Contains("VehicleBounceAnimation"))
        {
            Resources.Add("VehicleBounceAnimation", storyboard);
        }

        storyboard.Begin();

我怀疑它的动画和添加到地图中的图标数量是问题所在。如果我停止所有动画，那么性能会提高。它不是很好，但它明显更好。

在与Silverlight地图相同的页面上为另一个元素设置动画的jQuery如下所示：

function scrollElement(name, timeInSecs) 
        {
            var elementToScroll = document.getElementById(name);
            if(elementToScroll!=null)
            {
                var jscriptElement = $('#' + name);

                jscriptElement.animate({ scrollTop: elementToScroll.scrollHeight - elementToScroll.clientHeight }, (timeInSecs - 2) * 1000);
            }
            else
            {
                window.alert('Cannot find '+name+' to scroll');
            }
       }

Silverlight中断JQuery动画

2 个答案: