Silverlight прерывает анимацию JQuery

Question

У меня есть HTML-страница, которая содержит два основных элемента. Одна - это карта с серебряным светом (с анимированными кнопками), а другая - анимация jQuery.

Когда карта Silverlight содержит много кнопок, анимация jQuery очень прерывистая. Есть ли способ сделать Silverlight менее требовательным к ресурсам и позволить анимации jQuery иметь более высокий приоритет?

Answer 1

У меня есть пользовательский элемент управления 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>

Я переопределил метод OnApplyTemplate в VehicleMarker, чтобы после применения шаблона в элемент управления добавлялась анимация, где это необходимо:

        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();

Я подозреваю, что проблема заключается в анимации и количестве значков, добавляемых на карту. Если я остановлю все анимации, производительность улучшится. Это не здорово, но заметно лучше.

jQuery для анимации другого элемента на той же странице, что и карта silverlight, выглядит следующим образом:

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');
            }
       }

Answer 2

Вы можете регулировать частоту кадров приложений Silverlight, добавив параметр MaxFrameRate в тег объекта: -

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

Это может освободить процессор для обработки анимации JQuery.