Question

我是刚开始使用Composition类访问UWP中的可视层。
我正在尝试更改一个简单的程序，即在p5.js到UWP合成的特定区域（画布）中移动一个圆。
但是我陷入了在构图和定义运动功能方面陷入困境的困境。

下面的gif动画是我要在带有合成类的UWP中制作的。

为了帮助您理解，我从daniel shiffman编写的代码的本质中复制了Java脚本源代码。

var m;
function setup()
{
    createCanvas(320, 160);
    frameRate(60);
    m =new  Mover(
                      createVector(random(width), random(height)), 
                      createVector(random(-5, 5), random(-5, 5))
                      );
}

function draw()
{
    background(255,100,100);

    m.display();
    m.update();
    m.chkEdge();
}

class Mover
{
    constructor(loc, vel)
    {
        this.loc = loc;
        this.vel = vel;
    }

    update() {
        this.acc = createVector(random(-1, 1), random(-1, 1));
        this.loc.add(this.vel);
        this.vel.add(this.acc);
        this.vel.limit(5);
    }
    display() {
        stroke(0);  
        fill(175);
        ellipse(this.loc.x, this.loc.y, 15, 15); 
    }
    chkEdge() {
         if ( this.loc.x > width) this.loc.x =0;
         else if ( this.loc.x<0) this.loc.x =width;
         if ( this.loc.y> height) this.loc.y = 0;
         else if (this.loc.y<0) this.loc.y=height;
    }
}

我想用UWP编写这个程序，但是就像我之前说的，我不知道如何使圆形精灵视觉化以及完成功能后如何使精灵视觉运动。

下面是我的C锐素材。

        public MainPage()
    {
        this.InitializeComponent();

        var ran = new Random();
        Vector3 velocity = new Vector3(30, 30, 0);
        Vector3 accel = new Vector3(ran.Next(-1, 1), ran.Next(-1, 1), 0);

        var cnv = ElementCompositionPreview.GetElementVisual(mainCnv);
        var compositor = cnv.Compositor;
        var visual = compositor.CreateSpriteVisual();
        visual.Brush = compositor.CreateColorBrush(Color.FromArgb(100, 0, 100, 200));

        visual.Size = new Vector2(100f, 50.75f); // I want to make this circle

        visual.Offset = new Vector3(  // offset
            ran.Next(0, (int)mainCnv.Width),
            ran.Next(0, (int)mainCnv.Height),
            0); 

        ElementCompositionPreview.SetElementChildVisual(mainCnv, visual);

        //while(true)
        {

            Vector3KeyFrameAnimation animation = compositor.CreateVector3KeyFrameAnimation();

            animation.InsertKeyFrame(
                1.0f,
                visual.Offset + velocity // ......... 
            );
            animation.Duration = TimeSpan.FromSeconds(5);
            //animation.IterationCount = 1;
            animation.IterationBehavior = AnimationIterationBehavior.Forever;
            visual.StartAnimation("Offset", animation);

            //visual.Offset +=velocity; // this statement does not work.
            velocity += accel; //accel should be added velocity after behavior........
        }

    }

在mainPage.xaml中，我刚刚定义了“ mainCnv”画布。
下面是我用UWP创建的gif动画。我不能让它动起来，动起来。它只是在同一位置之间反复移动。

是否可以在UWP中制作相同的程序？
如果不能，我可以只使用Xaml.UI层。我很好奇我可以在作曲上做同样的事情。
感谢您的阅读。

Answer 1

根据您的要求，您可以使用Win2D进行处理。还有您所参考的code sample。

public void Update(Size controlSize)
{
    // Move the ball.
    Position += Velocity;

    // Bounce if we hit the edge.
    Vector2 topLeft = new Vector2(Radius);
    Vector2 bottomRight = controlSize.ToVector2() - new Vector2(Radius);

    float bounceX = (Position.X < topLeft.X || Position.X > bottomRight.X) ? -1 : 1;
    float bounceY = (Position.Y < topLeft.Y || Position.Y > bottomRight.Y) ? -1 : 1;

    Velocity *= new Vector2(bounceX, bounceY);

    Position = Vector2.Clamp(Position, topLeft, bottomRight);

    // Gradually fade in and out.
    FadeAge += FadeSpeed;
}

在UWP中使用合成使运动圈

1 个答案: