今天,我开始移植创建翻页样品在这里为Windows Phone 7到的WinRT(XAML,C#),以帮助这个问题张贴在堆栈溢出.但在移植过程中,我遇到了页面的剪辑部分.在Windows手机示例中,他们使用路径几何裁剪来剪切页面.但在WinRT中似乎只有矩形几何支持剪切选项.
如何在WinRT中实现类似路径几何剪裁的功能？
您可以从此处下载示例Windows电话代码
请找到我试过的源代码,请下载
在那里请找到类PageTurn.cs,我在下面用代码注释了代码:
void left_PointerEntered(object sender, Windows.UI.Xaml.Input.PointerRoutedEventArgs e)
{
//_workingOdd.Clip = _oddClipRegion;
//_workingEven.Clip = _evenClipRegion;
}
Heena Patil.. 12
希望这对你有所帮助.
以下是XAML,可以准确了解您链接到的演示的外观:
路径计算
此搜索
镜像2
产量
您可以通过将image1和image2网格放在视图框中来放大图像的大小,如下所示
您好heena,请您分享您创建的示例项目.然后它将帮助我们使用除了提供的xaml之外的真实工作源. (4认同)
嗨斯蒂芬我将在2-3天内发布翻转动画. (3认同)
Heena.请更新Stephan提供的代码并分享.我认为这将有助于他们中的许多人.到目前为止,杂志页面翻转动画还没有开源解决方案.任何方式欣赏你的努力.继续祝你好运. (2认同)
嗨斯蒂芬我建议将此标记为已回答.尽管我很欣赏Gerri的努力,但他提供的答案并不能完全解决你所提出的问题. (2认同)
谢谢Heena ...非常感谢..我很难找到解决方案...... (2认同)
Jerry Nixon.. 7
所以,让我们清楚事情的状态.
WP 8.1现在支持WinRT XAML
WP Silverlight XAML可以比WinRT XAML做得更多
例如,WP SL XAML可以使用自定义路径进行裁剪
WinRT XAML只能使用矩形进行裁剪
原因:矩形超出任何自定义形状,周期
XAML团队可以提升性能
今天,XAML团队没有计划改变裁剪
现在我们了解这个问题.我们还有其他选择吗？
如果你想剪辑图像,你很幸运.您可以创建任何形状的路径元素,并使用图像画笔绘制背景.这在技术上并不是剪裁,但你有相同的效果.
这会使这个:
但等等还有更多.ImageBrush本身可以转换.这意味着您可以在路径中移动图像的图像上执行翻译.此外,您还可以在图像上应用旋转.
首先,考虑像FlipBoard那样的动画.这为您提供了一个简单的页面翻转动画,看起来非常棒,而不需要复杂的剪辑.看看这个演示:http://blog.jerrynixon.com/2012/12/walkthough-use-xamls-3d-planeprojection.html
然后,你可能只是想复制那个Demo.没关系.下面的XAML将为您提供您想要的效果.它很容易动画:
它看起来像这样:
这是XAML,可以准确了解您链接到的演示的外观:
看起来像这样:
斯蒂芬,我不确定这需要做多少调整才能做好.我的猜测是......很多.好消息是:你可以在GPU上进行动画转换,这样大部分都应该加速.:)
// 杰瑞
希望这对你有所帮助.
以下是XAML,可以准确了解您链接到的演示的外观:
路径计算
此搜索
镜像2
产量
您可以通过将image1和image2网格放在视图框中来放大图像的大小,如下所示
所以,让我们清楚事情的状态.
WP 8.1现在支持WinRT XAML
WP Silverlight XAML可以比WinRT XAML做得更多
例如,WP SL XAML可以使用自定义路径进行裁剪
WinRT XAML只能使用矩形进行裁剪
原因:矩形超出任何自定义形状,周期
XAML团队可以提升性能
今天,XAML团队没有计划改变裁剪
现在我们了解这个问题.我们还有其他选择吗？
如果你想剪辑图像,你很幸运.您可以创建任何形状的路径元素,并使用图像画笔绘制背景.这在技术上并不是剪裁,但你有相同的效果.
这会使这个:
但等等还有更多.ImageBrush本身可以转换.这意味着您可以在路径中移动图像的图像上执行翻译.此外,您还可以在图像上应用旋转.
首先,考虑像FlipBoard那样的动画.这为您提供了一个简单的页面翻转动画,看起来非常棒,而不需要复杂的剪辑.看看这个演示:http://blog.jerrynixon.com/2012/12/walkthough-use-xamls-3d-planeprojection.html
然后,你可能只是想复制那个Demo.没关系.下面的XAML将为您提供您想要的效果.它很容易动画:
它看起来像这样:
这是XAML,可以准确了解您链接到的演示的外观:
看起来像这样:
斯蒂芬,我不确定这需要做多少调整才能做好.我的猜测是......很多.好消息是:你可以在GPU上进行动画转换,这样大部分都应该加速.:)
// 杰瑞
我给出了一个更完整的答案有点晚了,但我受到启发并开始研究可重复使用的控件/页面转换.目前的原型与工作相当不错RenderTransforms,并Clip Transforms为独立好看的动画支持.
我将研究WinRT XAML Toolkit的可重用控件,但同时您可以检查以下代码:
XAML
C#
using System;
using System.Threading.Tasks;
using Windows.Foundation;
using Windows.UI.Popups;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media.Animation;
using Windows.UI.Xaml.Media.Imaging;
namespace FlipControls
{
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
PreloadTransitionGridContentAsync();
}
private async Task PreloadTransitionGridContentAsync()
{
#region Waiting for page 2 content to load
var bi = Page2SampleContentImage.Source as BitmapImage;
if (bi.PixelWidth == 0)
{
bi.ImageFailed += (s, e) => new MessageDialog("Need a different sample image.").ShowAsync();
bi.ImageOpened += (s, e) => PreloadTransitionGridContentAsync();
return;
}
if (Page2ContentGrid.ActualWidth == 0)
{
SizeChangedEventHandler sizeChangedEventHandler = null;
sizeChangedEventHandler = (s, e) =>
{
PreloadTransitionGridContentAsync();
Page2ContentGrid.SizeChanged -= sizeChangedEventHandler;
};
Page2ContentGrid.SizeChanged += sizeChangedEventHandler;
return;
}
#endregion
var rtb = new RenderTargetBitmap();
await rtb.RenderAsync(Page2ContentGrid);
TransitionImage.Source = rtb;
await Task.Delay(40000);
}
private bool isCancellationRequested;
private enum FlipDirections
{
Left,
Right
}
private FlipDirections flipDirection;
private Point manipulationStartPosition;
private double rotationCenterX;
private double rotationCenterY;
private void ManipulationGrid_OnManipulationStarted(object sender, ManipulationStartedRoutedEventArgs e)
{
if (TransitionImage.Source == null)
{
CancelManipulation(e);
return;
}
manipulationStartPosition = e.Position;
if (Page1.Opacity == 1)
{
flipDirection = FlipDirections.Left;
Page2ClipTranslateTransform.X = ManipulationGrid.ActualWidth;
Page2.Opacity = 1;
TransitionGridClipTranslateTransform.X = -80000;
TransitionGridContainerTransform.TranslateX = ManipulationGrid.ActualWidth;
TransitionGrid.Opacity = .975;
}
else
{
if (manipulationStartPosition.X >= this.ManipulationGrid.ActualWidth / 2)
{
// Can't flip left since there is no page after the current one
CancelManipulation(e);
return;
}
flipDirection = FlipDirections.Right;
Page1.Opacity = 1;
}
}
private void ManipulationGrid_OnManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
{
if (this.isCancellationRequested)
{
return;
}
if (flipDirection == FlipDirections.Left)
{
var w = this.ManipulationGrid.ActualWidth;
var h = this.ManipulationGrid.ActualHeight;
var cx = Math.Min(0, Math.Max(e.Position.X - w, -w));
var cy = e.Cumulative.Translation.Y;
var angle = (Math.Atan2(cx + manipulationStartPosition.Y - w, -cy) * 180 / Math.PI + +90) % 360;
this.rotationCenterX = w + cx / 2;
if (cy < 0)
{
this.rotationCenterY = h;
}
else
{
this.rotationCenterY = 0;
}
Page2ClipTranslateTransform.X = w + cx / 2;
Page2ClipTranslateTransform.Y = -40000 + h / 2;
Page2ClipRotateTransform.CenterX = this.rotationCenterX;
Page2ClipRotateTransform.CenterY = this.rotationCenterY;
Page2ClipRotateTransform.Angle = angle;
TransitionGridClipTranslateTransform.X = -80000 - (cx / 2);
TransitionGridClipTranslateTransform.Y = -40000 + h / 2;
TransitionGridClipRotateTransform.CenterX = -cx / 2;
TransitionGridClipRotateTransform.CenterY = this.rotationCenterY;
TransitionGridClipRotateTransform.Angle = -angle;
TransitionGridContainerTransform.TranslateX = w + cx;
TransitionGridContainerTransform.CenterX = -cx / 2;
TransitionGridContainerTransform.CenterY = this.rotationCenterY;
TransitionGridContainerTransform.Rotation = 2 * angle;
}
}
private void ManipulationGrid_OnManipulationCompleted(object sender, ManipulationCompletedRoutedEventArgs e)
{
if (this.isCancellationRequested)
{
this.isCancellationRequested = false;
return;
}
var w = this.ManipulationGrid.ActualWidth;
var h = this.ManipulationGrid.ActualHeight;
var sb = new Storyboard();
AddAnimation(sb, Page2ClipTranslateTransform, "X", w / 2);
AddAnimation(sb, Page2ClipRotateTransform, "CenterX", w / 2);
AddAnimation(sb, Page2ClipRotateTransform, "Angle", 0);
AddAnimation(sb, TransitionGridClipTranslateTransform, "X", -80000 + (w / 2));
AddAnimation(sb, TransitionGridClipRotateTransform, "CenterX", w / 2);
AddAnimation(sb, TransitionGridClipRotateTransform, "Angle", 0);
AddAnimation(sb, TransitionGridContainerTransform, "TranslateX", 0);
AddAnimation(sb, TransitionGridContainerTransform, "CenterX", w / 2);
AddAnimation(sb, TransitionGridContainerTransform, "Rotation", 0);
sb.Begin();
}
private static void AddAnimation(Storyboard sb, DependencyObject dob, string path, double to)
{
var da = new DoubleAnimation();
Storyboard.SetTarget(da, dob);
Storyboard.SetTargetProperty(da, path);
da.To = to;
da.Duration = TimeSpan.FromSeconds(.2);
sb.Children.Add(da);
}
private void CancelManipulation(ManipulationStartedRoutedEventArgs e)
{
this.isCancellationRequested = true;
e.Complete();
}
}
}
京公网安备 11010802040832号 | 京ICP备19059560号-6 